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

Answer 1

90

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/

javascript events vue.js jnieto
la source

1

le lien violon ne fonctionne plus.

FrenkyB

Si l'intention d'appeler foo()est d'apporter des modifications non au modèle, utilisez unwatcher

Saksham

Ceci est un excellent exemple de la raison pour laquelle le code est requis dans la question . Veuillez le récupérer si possible et l'afficher ici.

isherwood

J'aimerais pouvoir récupérer le code de la question, mais c'était il y a déjà 5 ans ... heureusement, nous avons de bonnes réponses

jnieto

Answer 2

1

le lien violon ne fonctionne plus.

FrenkyB

Answer 3

Si l'intention d'appeler foo()est d'apporter des modifications non au modèle, utilisez unwatcher

Saksham

Answer 4

Ceci est un excellent exemple de la raison pour laquelle le code est requis dans la question . Veuillez le récupérer si possible et l'afficher ici.

isherwood

Answer 5

J'aimerais pouvoir récupérer le code de la question, mais c'était il y a déjà 5 ans ... heureusement, nous avons de bonnes réponses

jnieto

Answer 6

77

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

pherris
la source

Comment géreriez-vous les Sliders?

Royi

où sont les événements disponibles répertoriés dans la documentation. Je ne peux pas le trouver?

toraman

Ce ne sont que des événements JavaScript standard que vous pouvez trouver ici: developer.mozilla.org/en-US/docs/Web/Events#Standard_events

pherris

Merci! Mais prêt: la fonction n'a pas fonctionné pour moi. A la place, les méthodes: {foo () {// faire quelque chose}}

Vince Banzon

Notez également que si vous souhaitez enregistrer des événements "v-on: change" sur un composant de vue personnalisé (composant de fichier unique), "v-on: input" doit être utilisé à la place.

Andrés Biarge

Answer 7

Comment géreriez-vous les Sliders?

Royi

Answer 8

où sont les événements disponibles répertoriés dans la documentation. Je ne peux pas le trouver?

toraman

Answer 9

Ce ne sont que des événements JavaScript standard que vous pouvez trouver ici: developer.mozilla.org/en-US/docs/Web/Events#Standard_events

pherris

Answer 10

Merci! Mais prêt: la fonction n'a pas fonctionné pour moi. A la place, les méthodes: {foo () {// faire quelque chose}}

Vince Banzon

Answer 11

Notez également que si vous souhaitez enregistrer des événements "v-on: change" sur un composant de vue personnalisé (composant de fichier unique), "v-on: input" doit être utilisé à la place.

Andrés Biarge

Answer 12

95

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

Stephen Hallgren
la source

2

Pouvez-vous regarder automatiquement tout changement de modèle? Par exemple pour un formulaire avec plusieurs entrées qui doivent tous être surveillés?

Eric Burel

@EricBurel Je sais que c'est vieux, mais la réponse est non. Vous ne pouvez pas regarder l'objet de données entier auquel tous les champs sont liés, vous devez surveiller chaque propriété de cet objet individuellement, ce qui rend cette approche problématique pour les gros enregistrements sur des formulaires avec beaucoup de champs.

JohnC

1

@EricBurel En fait, vous pouvez regarder des objets imbriqués avec la propriété 'deep' définie sur 'true' -> vuejs.org/v2/api/#watch

SanBen le

Answer 13

2

Pouvez-vous regarder automatiquement tout changement de modèle? Par exemple pour un formulaire avec plusieurs entrées qui doivent tous être surveillés?

Eric Burel

Answer 14

@EricBurel Je sais que c'est vieux, mais la réponse est non. Vous ne pouvez pas regarder l'objet de données entier auquel tous les champs sont liés, vous devez surveiller chaque propriété de cet objet individuellement, ce qui rend cette approche problématique pour les gros enregistrements sur des formulaires avec beaucoup de champs.

JohnC

Answer 15

1

@EricBurel En fait, vous pouvez regarder des objets imbriqués avec la propriété 'deep' définie sur 'true' -> vuejs.org/v2/api/#watch

SanBen le

Answer 16

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

Answer 17

keyDown ne fonctionne pas que «retour arrière» enfoncé. Il est donc préférable d'utiliser @input

Peretz30

Answer 18

Dans ce violon, nous voyons que le retour arrière fonctionne avec @keyDown jsfiddle.net/rLzm0f1q (mais je ne dis pas que @inputc'est mauvais ou bon)

Kamil Kiełczewski

Answer 19

22

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/

Peretz30
la source

Que pouvez-vous utiliser à la place de @ sign? Y a-t-il une règle écrite quelque part à ce sujet? Je pose cette question car dans mon backend, le signe @ est réservé à autre chose.

FrenkyB

Answer 20

Que pouvez-vous utiliser à la place de @ sign? Y a-t-il une règle écrite quelque part à ce sujet? Je pose cette question car dans mon backend, le signe @ est réservé à autre chose.

FrenkyB

Answer 21

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

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

Réponses: