Comment lancer un événement lorsque v-model change? (vue js)
j'essaie de tirer le foo() fonction avec le @click mais comme vous pouvez le voir, il faut appuyer deux fois sur le bouton radio pour lancer l'événement correctement . Ne saisissez la valeur que la deuxième fois que vous appuyez sur...
je veux déclencher l'événement sans @click ne lancer l'événement que lorsque v-model (srStatus) changements.
voici mon Violon:
4 réponses
cela arrive parce que votre click le handler démarre avant que la valeur du bouton radio ne change. Vous avez besoin d'écouter l' change événement à la place:
<input
type="radio"
name="optionsRadios"
id="optionsRadios2"
value=""
v-model="srStatus"
v-on:change="foo"> //here
Aussi, assurez-vous que vous voulez vraiment appeler foo() sur le prêt... on dirait que peut-être tu ne veux pas vraiment faire ça.
ready:function(){
foo();
},
vous pouvez en fait simplifier cela en supprimant le v-on directives:
<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">
Et watch méthode pour écouter la modification:
new Vue ({
el: "#app",
data: {
cases: [
{ name: 'case A', status: '1' },
{ name: 'case B', status: '0' },
{ name: 'case C', status: '1' }
],
activeCases: [],
srStatus: ''
},
watch: {
srStatus: function(val, oldVal) {
for (var i = 0; i < this.cases.length; i++) {
if (this.cases[i].status == val) {
this.activeCases.push(this.cases[i]);
alert("Fired! " + val);
}
}
}
}
});
Vue2: si vous voulez seulement détecter un changement sur le flou d'entrée (par exemple après avoir appuyé sur enter ou cliquer ailleurs) faire (plus d'info ici)
<input @change="foo" v-model... >
si vous souhaitez détecter des changements de caractère (lors de la saisie par l'utilisateur), utilisez
<input @keyDown="foo" v-model... >
et vous pouvez lire des clés par définir foo(event) (EN code JS) et à l'intérieur de celui-ci par if (event.key == "Enter") {...} ou par event.keyCode plus de détails ici.
Juste pour ajouter à la bonne réponse ci-dessus, en Vue.JS v1.0 Vous pouvez écrire
<a v-on:click="doSomething">
donc dans cet exemple ce serait
v-on:change="foo"