Comment déclencher un événement lorsque v-model change? (Vue js)

J'essaie de déclencher la fonction "foo" avec v-on = "click …" mais, comme vous pouvez le voir, vous devez appuyer deux fois sur le bouton radio pour déclencher l'événement correctement. Seulement attrape la valeur la deuxième fois que vous appuyez …

Je veux déclencher l'événement sans v-on = "click …"; Déclenche uniquement l'événement lorsque v-model (srStatus) change.

Voici mon violon:

Http://fiddle.jshell.net/wanxe/vsa46bw8/

Cela se produit car votre gestionnaire de click déclenche avant que la valeur du bouton radio ne change. Vous devez plutôt écouter l'événement de change :

 <input type="radio" name="optionsRadios" id="optionsRadios2" value="" v-model="srStatus" v-on="change: foo"> //here

De plus, assurez-vous de bien vouloir appeler foo() sur prêt … semble peut-être que vous ne voulez vraiment pas le faire.

 ready:function(){ foo(); },

Vous pouvez en fait simplifier ceci en supprimant les directives v-on :

 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">

Et utilisez la méthode de watch 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); } } } } });

Juste pour ajouter à la réponse correcte ci-dessus, dans Vue.JS v1.0, vous pouvez écrire

 <a v-on:click="doSomething">

Donc dans cet exemple, il serait

  v-on:change="foo"

Voir: http://v1.vuejs.org/guide/syntax.html#Arguments