¿Cómo activar un evento cuando cambia el modelo v? (vue js)

Estoy tratando de disparar la función foo() con el @click pero como puede ver, es necesario presionar el botón de opción dos veces para disparar el evento correctamente . Solo captura el valor la segunda vez que presionas...

Quiero disparar el evento sin @click solo disparar el evento cuando v-model (srStatus) cambie.

Aquí está mi violín:

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

Author: jnieto, 2015-10-21
Source

4 answers

Esto sucede porque su controlador click se activa antes de que cambie el valor del botón de opción. Necesitas escuchar el evento change en su lugar:

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

También, asegúrese de que realmente desea llamar a foo() en ready... parece que tal vez en realidad no quieres hacer eso.

ready:function(){
    foo();
},
 33
Author: pherris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-06 11:22:49

Puede simplificar esto eliminando las directivas v-on: 

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

Y usa el método watch 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);
                }
            }
        }
    }
});
 55
Author: Stephen Hallgren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-07 11:24:06

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

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

Si desea detectar cambios de caracteres individuales (durante la escritura del usuario) use

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

Y puedes leer la clave definiendo foo(event) (en la parte del código JS) y dentro de ella por if (event.key == "Enter") {...} o por event.keyCode más detalles AQUÍ.

 10
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-08 17:17:27

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

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

Así que en este ejemplo sería 

 v-on:change="foo"

Véase: http://v1.vuejs.org/guide/syntax.html#Arguments

 7
Author: Matthew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-18 11:41:38