Comment déclencher un événement lorsque le v-model change?

Question 1

J'essaie de déclencher la foo()fonction avec le @clickmais comme vous pouvez le voir, vous devez appuyer deux fois sur le bouton radio pour déclencher 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 @clickdéclencher uniquement l'événement lorsque v-model(srStatus) change.

voici mon violon:

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

Question 2

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

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

Assurez-vous également que vous voulez vraiment appeler foo()prêt ... il semble que vous ne vouliez peut-être pas faire cela.

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

Question 3

Vous pouvez en fait simplifier cela en supprimant les v-ondirectives:

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

Et utilisez la watchméthode pour écouter le changement:

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);
                }
            }
        }
    }
});

Question 4

Vue2: si vous voulez seulement détecter le changement sur le flou d'entrée (par exemple après avoir appuyé sur Entrée ou cliquez ailleurs), faites (plus d'informations ici )

<input @change="foo" v-model... >

Si vous souhaitez détecter des changements de caractère unique (lors de la saisie de l'utilisateur), utilisez

<input @keydown="foo" v-model... >

Vous pouvez également utiliser @keyupet des @inputévénements. Si vous souhaitez passer des paramètres supplémentaires, utilisez un modèle, par exemple @keyDown="foo($event, param1, param2)". Comparaison ci-dessous (version modifiable ici )

Afficher l'extrait de code

new Vue({
  el: "#app",
  data: { 
    keyDown: { key:null, val: null,  model: null, modelCopy: null },
    keyUp: { key:null, val: null,  model: null, modelCopy: null },
    change: { val: null,  model: null, modelCopy: null },
    input: { val: null,  model: null, modelCopy: null },
    
    
  },
  methods: {
  
    keyDownFun: function(event){                   // type of event: KeyboardEvent   
      console.log(event);  
      this.keyDown.key = event.key;                // or event.keyCode
      this.keyDown.val = event.target.value;       // html current input value
      this.keyDown.modelCopy = this.keyDown.model; // copy of model value at the moment on event handling
    },
    
    keyUpFun: function(event){                     // type of event: KeyboardEvent
      console.log(event);  
      this.keyUp.key = event.key;                  // or event.keyCode
      this.keyUp.val = event.target.value;         // html current input value
      this.keyUp.modelCopy = this.keyUp.model;     // copy of model value at the moment on event handling
    },
    
    changeFun: function(event) {                   // type of event: Event
      console.log(event);
      this.change.val = event.target.value;        // html current input value
      this.change.modelCopy = this.change.model;   // copy of model value at the moment on event handling
    },
    
    inputFun: function(event) {                    // type of event: Event
      console.log(event);
      this.input.val = event.target.value;         // html current input value
      this.input.modelCopy = this.input.model;     // copy of model value at the moment on event handling
    }
  }
})

div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Type in fields below (to see events details open browser console)

<div id="app">
  <div><input type="text" @keyDown="keyDownFun" v-model="keyDown.model"><br> @keyDown (note: model is different than value and modelCopy)<br> key:{{keyDown.key}}<br> value: {{ keyDown.val }}<br> modelCopy: {{keyDown.modelCopy}}<br> model: {{keyDown.model}}</div>
  
  <div><input type="text" @keyUp="keyUpFun" v-model="keyUp.model"><br> @keyUp (note: model change value before event occure) <br> key:{{keyUp.key}}<br> value: {{ keyUp.val }}<br> modelCopy: {{keyUp.modelCopy}}<br> model: {{keyUp.model}}</div>
  
  <div><input type="text" @change="changeFun" v-model="change.model"><br> @change (occures on enter key or focus change (tab, outside mouse click) etc.)<br> value: {{ change.val }}<br> modelCopy: {{change.modelCopy}}<br> model: {{change.model}}</div>
  
  <div><input type="text" @input="inputFun" v-model="input.model"><br> @input<br> value: {{ input.val }}<br> modelCopy: {{input.modelCopy}}<br> model: {{input.model}}</div>
     
</div>

Développer l'extrait

Question 5

Vous devez utiliser @input:

<input @input="handleInput" />

@input se déclenche lorsque l'utilisateur modifie la valeur d'entrée.

@change se déclenche lorsque l'utilisateur a changé la valeur et une entrée floue (par exemple, cliqué quelque part à l'extérieur)

Vous pouvez voir la différence ici: https://jsfiddle.net/posva/oqe9e8pb/

Question 6

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

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

Donc, dans cet exemple, ce serait

 v-on:change="foo"

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