如何在 v 模型更改时触发事件？

javascript events vue.js

2022-08-30 04:55:07

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

我想在不仅在（srStatus）更改时触发事件的情况下触发事件。@clickv-model

这是我的小提琴：

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

答案 1

您实际上可以通过删除指令来简化此操作：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);
                }
            }
        }
    }
});

答案 2

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

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

另外，请确保您真的想随时致电...似乎也许你实际上并不想这样做。foo()

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