web-dev-qa-db-fra.com

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

J'essaie d'activer la fonction foo() avec le @click mais, comme vous pouvez le constater, vous devez appuyer sur le bouton radio deux fois pour déclencher l'événement correctement. Ne capturez la valeur que la deuxième fois que vous appuyez sur ...

Je souhaite déclencher l'événement sans @click uniquement si l'événement v-model (srStatus) est modifié.

voici mon violon:

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

javascripteventsvue.js
70
jnieto

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

<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() sur prêt ... semble que vous ne voulez peut-être pas faire cela.

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

Vous pouvez réellement simplifier cela en supprimant les directives v-on:

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

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

Vue2: si vous souhaitez uniquement détecter le changement de flou d’entrée (par exemple, après avoir appuyé sur Entrée ou sur un autre emplacement), faites (plus d'infos ici )

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

Si vous souhaitez détecter les modifications d'un seul caractère (lors de la saisie par l'utilisateur), utilisez

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

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

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>
20
Kamil Kiełczewski

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

8
Matthew

Vous devriez 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 modifie la valeur et déverrouille l'entrée (par exemple, cliqué quelque part à l'extérieur)

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

7
Peretz30