Hello guys I have the following code input :
<v-file-input
class="mx-6"
show-size
accept=".xlsx"
label="File input"
#change="selectFile"
></v-file-input>
How can I make it accept only specific names.xlsx? Like it will accept xlsx files containing specific words in It.
Example:
name-george.xlsx true
name-anna.xlsx false
george-surname.xlsx true
I want It to contain george word inside the xlsx File Name
use a validation rule. Here is an example to get you started
https://codepen.io/radvic/pen/XWYxKpQ
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
rules: [
v => {
for(index in v){
const fileName = v[index].name;
if(fileName.match(/george(.*)\.xlsx/g) === null){
return 'The file name "'+fileName+'" is wrong';
}
}
return true;
},
],
}),
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.0.18/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-file-input multiple :rules="rules" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></v-file-input>
</v-app>
</div>
Related
Normally, I can replace translated values in codes like this-
<p>{{ $t('greeting') }}</p>
but it's not working in vue2 inputs-
<dropdown
:items="filteredCityList"
ref="city"
itemText="persianName"
:placeholder="{{$t('SearchCityAndHotel')}}"
#onSelect="onSelectCity"
>
</dropdown>
Even I tried this-
<dropdown
:items="filteredCityList"
ref="city"
itemText="persianName"
:placeholder="$t('SearchCityAndHotel')"
#onSelect="onSelectCity"
>
</dropdown>
Your second try should work fine, Here is the working demo. Please do have a look and try to find the root cause of the issue you are facing.
const messages = {
jp: {
SearchCityAndHotel: 'XXXXX XXXX XXX XXXXX'
},
en: {
SearchCityAndHotel: 'Search City And Hotel'
}
}
const i18n = new VueI18n({
locale: "en",
messages
});
new Vue({
el: '#app',
i18n
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-i18n#8.15.3/dist/vue-i18n.min.js"></script>
<div id="app">
<input type="text" :placeholder="$t('SearchCityAndHotel')"/>
</div>
<v-autocomplete v-if="first.title == 'host'"
:items="host"
v-model="selected_host"
item-value="host_n"
outlined
hide-details
dense
></v-autocomplete>
I'd like to input new text which is not included in items.
autocomplete is just suggestion to user.
But I can't input new data in v-autocomplete. Whenever I write new data, it was deleted.
You should use v-combobox (doc here) instead of v-autocomplete if you want the user to add its own value
If you want to deal with multiple values, you can use the multiple attributes and passing an array to the v-model instead of a string (or an object if you use the return-object param)
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
tagsSorted() {
return this.tags.sort()
}
},
data: () => ({
host: [{
host_n: 'Foo',
},
{
host_n: 'Bar',
}
],
first: {
title: 'host'
},
selected_host: ''
}),
methods: {
sendData() {
console.log(this.selected_host)
}
}
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.css" />
<div id="app" data-app>
<v-combobox v-if="first.title == 'host'" :items="host" v-model="selected_host" item-value="host_n" item-text="host_n" outlined hide-details dense></v-combobox>
<v-btn #click="sendData">Send data</v-btn>
</div>
I have a list of values in the Vuex store that I create v-switches for but I would like for the default value of the v-switch to be true on creation. I have tried input-value="true" but it does nothing. Any ideas how to set them to true since I can not find anything in the documentation that helps me?
<v-switch
v-for="(layerg, k) in getAddedGeoMetLayers"
:key="k"
:label="layerg"
:value="layerg"
dense
hide-details
v-model="selectedGeometLayers"
#change="updateSelectedAddedGeoMetLayers"
></v-switch>
export default {
mounted () {
this.selectedGeometLayers = this.getSelectedAddedGeometLayers
},
data () {
return {
selectedGeometLayers: []
}
},
computed: {
...mapGetters('map', [
'getSelectedAddedGeometLayers'
])
},
methods: {
updateSelectedAddedGeoMetLayers: function () {
this.$store.dispatch('map/updateSelectedAddedGeometLayers', this.selectedGeometLayers)
}
}
You need to set selectedValues Array to equal the getArray - this way all the v-switch will be selected at the beginning:
mounted() {
this.selectedValues = [...this.getArray]
}
From the docs, it looks like you can set the model to have every item in your array.
From: https://vuetifyjs.com/en/components/switches/#model-as-array
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
people: ['John', 'Jacob'],
}
},
})
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<p>{{ people }}</p>
<v-switch
v-model="people"
color="primary"
label="John"
value="John"
></v-switch>
<v-switch
v-model="people"
color="primary"
label="Jacob"
value="Jacob"
></v-switch>
</v-container>
</v-app>
</div>
I get some text from API then I display it. But before I display it, I need to inject or replace some variable in the text to value from variable.
Please check this out to understand what I mean:
https://jsfiddle.net/0q4ot5sw/
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text }}
</div>
You can do that
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text.replace("%variable%", variable) }}
</div>
or that
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
},
computed: {
resultText: function() {
return this.text.replace("%variable%", this.variable);
}
}
})
and use like this
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ resultText }}
</div>
You can use computed value to do the task
new Vue({
el: '#app',
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word123' // How to inject this variable to the text?
},
computed : {
changeText : function() {
return this.text + this.variable
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ changeText }}</p>
</div>
You can create a function (or a computed property, this decision is actually yours) and combine those two strings. Something like this
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word'
},
methods: {
getText: function(){
return this.text + this.variable;
},
toggle: function(todo){
todo.done = !todo.done
}
}
})
On your template, you just call the function you created
<div id="app">
{{ getText() }}
</div>
I tried to use a v-select who display all countries. so i did :
<v-select on-change="updateCountryId" label="country_name" :options="countries" ></v-select>
it works great and display my countries but the function updateCountryId doesn't seems to work
methods: {
updateCountryId: function() {
alert('ok');
}
}
but i never see the ok
to import vue-select I did :
<script src="/js/vue-select/vue-select.js"> </script>
i use it in a twig file so in my vue-select.js i rewrite what i found on https://unpkg.com/vue-select#1.3.3 but replace the {{ }} by <% %>
ps : i already tried v-on:change, #change and onChange
and my code looks like that (i skip thing i judge useless)
<div id="General">
<div class="form-group">
<label>Pays :</label>
<v-select onChange="updateCountryId" label="country_name" :options="countries" ></v-select>
</div>
.
.
.
<script src="/js/vue-select/vue-select.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script>
Vue.config.delimiters = ['<%', '%>'];
Vue.component('v-select', VueSelect.VueSelect);
var vm = new Vue({
el: "#General",
data: {
countries: [],
},
filters: {
},
methods: {
updateCountryId: function () {
console.log('ok');
alert('ok');
},`
You are missing the colon :
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: {
options: ['one', 'two', 'three'],
selected: ''
},
methods: {
updateCountryId: function() {
alert('ok');
}
}
});
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<div id="app">
<v-select :on-change="updateCountryId" label="country_name" :options="options" :searchable="false" ></v-select>
</div>
Update
you need to use unpkg.com/vue-select#2.0.0 because version 1 is not compatible with the current version of Vuejs
Ok, this was really causing me some headache, it seems it has changed again on version 3. Per the documentation (https://vue-select.org/guide/upgrading.html#index-prop-replaced-with-reduce), they removed these 3 functions: onChange, onInput, onSearch in favor of using an event: #input
export default {
name: 'app',
methods: {
changedValue: function() {
alert("A new value was selected");
}
}
}
<v-select
options: ['one', 'two', 'three']
selected: ''
#input="changedValue" >
</v-select>
you can do this
<v-select :options="etat_nip" v-model="etat_nip_selected"></v-select>
and add the v-model "etat_nip_selected " in watch like this
watch:{
'etat_nip_selected' : function (val, oldval) {
console.log(val);
}
},
for more informations https://v2.vuejs.org/v2/guide/computed.html#Watchers
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: {
options: ['one', 'two', 'three'],
selected: ''
},
methods: {
updateCountryId: function() {
alert('ok');
}
}
});
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<div id="app">
<v-select :on-change="updateCountryId" label="country_name" :options="options" :searchable="false" ></v-select>
</div>
It worked when I use #input not #change