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
Related
I want to use the Id of the element in which I use the function as a parameter. Example:
<div
class="col-2 column-center"
id="myId"
#mouseover="aFunction(id)"
>
methods: {
aFunction(id){
alert(id);
}
}
But it doesn't work. How can I do it?
In another way, you can make your id attribute bind with the data property, like this :
<template>
<div class="col-2 column-center" v-bind:id="id" #mouseover="aFunction(id)">
test
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
id: 'myId',
};
},
methods: {
aFunction(id) {
alert(id);
},
},
};
</script>
You can pass the event to the method and then get the id from event.target.id.
https://jsfiddle.net/tr0f2jpw/
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
aFunction(event){
alert(event.target.id);
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div
class="col-2 column-center"
id="myId"
#mouseover="aFunction($event)"
>
some stuff
</div>
</div>
I tried to show particular string using v-text. But it shows nothing.
Tried code
ccc.handlebars
<div id="app">
<div class="input-group mb-3">
<input type="text" class="form-control" v-text="getValues[0].value">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
'bulk': {{{bulks}}}
},
computed: {
getValues: function() {
return this.bulk;
}
},
methods: {},
});
</script>
getValues retuens JSON
[
{ name: "Dauth", age: "18", value: "TGFR123" }
]
I want to show TGFR123 in the text box
Above getValues returns the correct JSON. But v-text="getValues[0].value" not shows the string. Help me to solve this.
v-text does not work on input.
If you want to set the value of an input use :value or v-model
var app = new Vue({
el: '#app',
data: {
bulk: [{
name: "Dauth",
age: "18",
value: "TGFR123"
}]
},
computed: {
getValues: function() {
return this.bulk;
}
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<div id="app">
Bind : <input type="text" :value="getValues[0].value">
v-model : <input type="text" v-model="getValues[0].value">
<div>Result : {{getValues[0].value}}</div>
</div>
With v-model the data will be changed with the user input
v-text
value binding
You can use v-model or v-bind:value to insert this value in your input
var app = new Vue({
el: '#app',
data: {
bulk: [{id: 123, name: "Test", value: "NerF21_346"}]
},
computed: {
getValues() {
return this.bulk[0].value
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="getValues">
</div>
v-model documentation
I'm trying to start a method after the value of the component Vue Multiselect has been changed using #input, but I'm getting the following compilation error:
CS0103: The name 'input' does not exist in the current context
Here's my multiselect:
<multiselect v-model="Instalacao.value" label="Serie" track-by="Serie" placeholder="Nº de série" :options="Instalacoes"
:multiple="false" :searchable="true" :allow-empty="false" :disabled="Editando" #input="getTecnicosByRepresentante">
<span slot="noResult">Nenhum técnico encontrado</span>
</multiselect>
This example works as expected: both the watch and the #input handler execute when you select a value. Your problem is probably not in the code that you included here.
new Vue({
el: '#app',
components: {
Multiselect: window.VueMultiselect.default
},
data: {
Instalacao: {
value: null
},
Instalacoes: [{
Serie: 'one',
value: 'Vue.js'
},
{
Serie: 'two',
value: 'Vue-Multiselect'
},
{
Serie: 'three',
value: 'Vuelidate'
}
]
},
watch: {
'Instalacao.value': function(newValue) {
console.log('Updated', newValue);
}
},
methods: {
getTecnicosByRepresentante() {
console.log("Input detected, too");
}
}
})
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<link href="https://unpkg.com/vue-multiselect#latest/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect#latest/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect v-model="Instalacao.value" label="Serie" track-by="Serie" placeholder="Nº de série" :options="Instalacoes" :multiple="false" :searchable="true" :allow-empty="false" #input="getTecnicosByRepresentante">
<span slot="noResult">Nenhum técnico encontrado</span>
</multiselect>
<pre>{{ Instalacao.value }}</pre>
</div>
In the following code, clicking on the component emits a signal to the parent, who modifies its state inline (in the sense - not via a handler):
Vue.component('my-component', {
template: '<div v-on:click="emitit">click on the component</div>',
methods: {
emitit: function() {
this.$emit('mysignal', 7)
}
}
})
new Vue({
el: "#root",
data: {
from: 0
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="root">
<my-component v-on:mysignal="from=5"></my-component>
from component: {{ from }}
</div>
Is it possible to access the parameter provided via the $emit directly in v-on:mysignal="..."?
I know that I can use a handler defined in the main Vue component but I would like to simplify my code and avoid to have several handlers in methods.
Yes, like this:
<my-component v-on:mysignal="value => from = value"></my-component>
Vue.component('my-component', {
template: '<div v-on:click="emitit">click on the component</div>',
methods: {
emitit: function() {
this.$emit('mysignal', 7)
}
}
})
new Vue({
el: "#root",
data: {
from: 0
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="root">
<my-component v-on:mysignal="value => from = value"></my-component>
from component: {{ from }}
</div>
#click="val => $emit('mysignal', val)"
<div v-on:click="val => $emit('mysignal', val)">click the component</div>'
or even
#click.prevent="e => $emit('mysignal', e.target.value)"
Based on this example https://vuejs.org/examples/select2.html
I try to create component for reuse in a future.
Unfortunately, my code doesn't work.
HTML:
<template id="my-template">
<p>Selected: {{selected}}</p>
<select v-select="selected" :options="options">
<option value="0">default</option>
</select>
</template>
<div id="app">
<my-component></my-component>
</div>
Vue:
Vue.component('my-component', {
template: '#my-template'
})
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function () {
var self = this
$(this.el)
.select2({
data: this.params.options
})
.on('change', function () {
self.set(this.value)
})
},
update: function (value) {
$(this.el).val(value).trigger('change')
},
unbind: function () {
$(this.el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#app',
data: {
selected: 0,
options: [
{ id: 1, text: 'hello' },
{ id: 2, text: 'what' }
]
}
})
https://jsfiddle.net/xz62be63/
Thank you for any help!
your problem has nothing to do with the directive itself.
selected and options is defined in the data of your Vue main instance, not in the data of my-component - so it's not available in its template.
But you can pass it from the main instance to the component using props:
<div id="app">
<my-component :selected.sync="selected" :options="options"></my-component>
<!-- added the .sync modifier to transfer the value change back up to the main instance-->
</div>
and in the code:
Vue.component('my-component', {
template: '#my-template',
props: ['selected','options']
})
updated fiddle: https://jsfiddle.net/Linusborg/rj1kLLuc/