¿Cómo disparar un evento cuando cambia el modelo v?

Question 1

Estoy tratando de activar la foo()función con el @clickpero, como puede ver, necesito presionar el botón de radio dos veces para activar el evento correctamente. Solo capture el valor la segunda vez que presione ...

Quiero disparar el evento sin @clicksolo disparar el evento cuando v-model(srStatus) cambia.

aquí está mi violín:

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

Question 2

Esto sucede porque su clickcontrolador dispara antes de que cambie el valor del botón de opción. En su lugar, debes escuchar el changeevento:

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

Además, asegúrese de que realmente quiere llamar foo()listo ... parece que tal vez no quiera hacer eso.

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

Question 3

En realidad, puede simplificar esto eliminando las v-ondirectivas:

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

Y usa el watchmétodo para escuchar el cambio:

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 solo desea detectar cambios en el desenfoque de entrada (por ejemplo, después de presionar enter o hacer clic en otro lugar), hágalo (más información aquí )

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

Si desea detectar cambios de un solo carácter (durante la escritura del usuario) utilice

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

También puede utilizar @keyupy @inputeventos. Si desea pasar parámetros adicionales, utilice en la plantilla, por ejemplo @keyDown="foo($event, param1, param2)". Comparación a continuación (versión editable aquí )

Mostrar fragmento de código

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>

Expandir fragmento

Question 5

Deberías usar @input:

<input @input="handleInput" />

@input se dispara cuando el usuario cambia el valor de entrada.

@change se dispara cuando el usuario cambia el valor y desenfoca la entrada (por ejemplo, hace clic en algún lugar fuera)

Puede ver la diferencia aquí: https://jsfiddle.net/posva/oqe9e8pb/

Question 6

Solo para agregar a la respuesta correcta anterior, en Vue.JS v1.0 puede escribir

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

Entonces, en este ejemplo sería

 v-on:change="foo"

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

Answer 1

90

Estoy tratando de activar la foo()función con el @clickpero, como puede ver, necesito presionar el botón de radio dos veces para activar el evento correctamente. Solo capture el valor la segunda vez que presione ...

Quiero disparar el evento sin @clicksolo disparar el evento cuando v-model(srStatus) cambia.

aquí está mi violín:

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

javascript events vue.js jnieto
fuente

1

el enlace de violín ya no funciona.

FrenkyB

Si la intención de la llamada foo()es realizar cambios que no sean de plantilla, use awatcher

Saksham

Este es un gran ejemplo de por qué se requiere código en la pregunta . Por favor recupérelo si es posible y muéstrelo aquí.

isherwood

Ojalá pudiera recuperar el código de la pregunta, pero ya fue hace 5 años ... afortunadamente tenemos buenas respuestas

jnieto

Answer 2

1

el enlace de violín ya no funciona.

FrenkyB

Answer 3

Si la intención de la llamada foo()es realizar cambios que no sean de plantilla, use awatcher

Saksham

Answer 4

Este es un gran ejemplo de por qué se requiere código en la pregunta . Por favor recupérelo si es posible y muéstrelo aquí.

isherwood

Answer 5

Ojalá pudiera recuperar el código de la pregunta, pero ya fue hace 5 años ... afortunadamente tenemos buenas respuestas

jnieto

Answer 6

77

Esto sucede porque su clickcontrolador dispara antes de que cambie el valor del botón de opción. En su lugar, debes escuchar el changeevento:

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

Además, asegúrese de que realmente quiere llamar foo()listo ... parece que tal vez no quiera hacer eso.

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

pherris
fuente

¿Cómo manejarías Sliders?

Royi

¿Dónde están los eventos disponibles enumerados en la documentación? No puedo encontrarlo?

toraman

Estos son solo eventos estándar de JavaScript que puede encontrar aquí: developer.mozilla.org/en-US/docs/Web/Events#Standard_events

pherris

¡Gracias! Pero Ready: la función no me funcionó. En cambio, métodos: {foo () {// haz algo}}

Vince Banzon

También tenga en cuenta que si desea registrar eventos "v-on: change" en un componente de vue personalizado (componente de archivo único), debe utilizar "v-on: input" en su lugar.

Andrés Biarge

Answer 7

¿Cómo manejarías Sliders?

Royi

Answer 8

¿Dónde están los eventos disponibles enumerados en la documentación? No puedo encontrarlo?

toraman

Answer 9

Estos son solo eventos estándar de JavaScript que puede encontrar aquí: developer.mozilla.org/en-US/docs/Web/Events#Standard_events

pherris

Answer 10

¡Gracias! Pero Ready: la función no me funcionó. En cambio, métodos: {foo () {// haz algo}}

Vince Banzon

Answer 11

También tenga en cuenta que si desea registrar eventos "v-on: change" en un componente de vue personalizado (componente de archivo único), debe utilizar "v-on: input" en su lugar.

Andrés Biarge

Answer 12

94

En realidad, puede simplificar esto eliminando las v-ondirectivas:

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

Y usa el watchmétodo para escuchar el cambio:

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
fuente

2

¿Puedes ver automáticamente cualquier cambio de modelo? Por ejemplo, para un formulario con múltiples entradas que deben ser supervisadas.

Eric Burel

@EricBurel Sé que esto es antiguo, pero la respuesta es no. No puede ver todo el objeto de datos al que están vinculados todos los campos, necesitaría observar todas y cada una de las propiedades de ese objeto individualmente, lo que hace que este enfoque sea problemático para registros grandes en formularios con muchos campos.

JohnC

1

@EricBurel En realidad, puede ver objetos anidados con la propiedad 'deep' establecida en 'true' -> vuejs.org/v2/api/#watch

SanBen

Answer 13

2

¿Puedes ver automáticamente cualquier cambio de modelo? Por ejemplo, para un formulario con múltiples entradas que deben ser supervisadas.

Eric Burel

Answer 14

@EricBurel Sé que esto es antiguo, pero la respuesta es no. No puede ver todo el objeto de datos al que están vinculados todos los campos, necesitaría observar todas y cada una de las propiedades de ese objeto individualmente, lo que hace que este enfoque sea problemático para registros grandes en formularios con muchos campos.

JohnC

Answer 15

1

@EricBurel En realidad, puede ver objetos anidados con la propiedad 'deep' establecida en 'true' -> vuejs.org/v2/api/#watch

SanBen

Answer 16

Vue2: si solo desea detectar cambios en el desenfoque de entrada (por ejemplo, después de presionar enter o hacer clic en otro lugar), hágalo (más información aquí )

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

Si desea detectar cambios de un solo carácter (durante la escritura del usuario) utilice

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

También puede utilizar @keyupy @inputeventos. Si desea pasar parámetros adicionales, utilice en la plantilla, por ejemplo @keyDown="foo($event, param1, param2)". Comparación a continuación (versión editable aquí )

Mostrar fragmento de código

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>

Expandir fragmento

Answer 17

keyDown no funciona que 'retroceso' presionado. Así que es mejor usar @input

Peretz30

Answer 18

En este violín vemos que el retroceso funciona con @keyDown jsfiddle.net/rLzm0f1q (sin embargo, no digo que @inputsea bueno o malo)

Kamil Kiełczewski

Answer 19

22

Deberías usar @input:

<input @input="handleInput" />

@input se dispara cuando el usuario cambia el valor de entrada.

@change se dispara cuando el usuario cambia el valor y desenfoca la entrada (por ejemplo, hace clic en algún lugar fuera)

Puede ver la diferencia aquí: https://jsfiddle.net/posva/oqe9e8pb/

Peretz30
fuente

¿Qué puedes usar en lugar del signo @? ¿Hay alguna regla escrita en alguna parte sobre esto? Estoy preguntando esto porque en mi backend, el signo @ está reservado para otra cosa.

FrenkyB

Answer 20

¿Qué puedes usar en lugar del signo @? ¿Hay alguna regla escrita en alguna parte sobre esto? Estoy preguntando esto porque en mi backend, el signo @ está reservado para otra cosa.

FrenkyB

Answer 21

Solo para agregar a la respuesta correcta anterior, en Vue.JS v1.0 puede escribir

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

Entonces, en este ejemplo sería

 v-on:change="foo"

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

¿Cómo disparar un evento cuando cambia el modelo v?

Respuestas: