v-model 更改时如何触发事件？

Question

我正在尝试使用 --- 触发 @click foo() 函数，但如您所见，需要按两次单选按钮才能正确触发事件。仅在您第二次按下时捕获该值…

我想在没有 @click 的情况下触发事件，仅在 v-model (srStatus) 更改时触发事件。

这是我的小提琴：

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

原文由 jnieto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

发生这种情况是因为您的 click 处理程序在单选按钮的值更改之前触发。您需要改为听 change 事件：

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

另外，请确保您真的想调用 foo() 准备就绪…似乎您实际上并不想这样做。

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

原文由 pherris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您实际上可以通过删除 v-on 指令来简化此操作：

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

并使用 watch 方法来监听变化：

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议