javascript - v-for 中的 VueJS 事件绑定(bind)

Question

我正在使用 VueJS 显示对象列表，如下所示:

<div v-for="register in registers">
    <input type="checkbox" v-model="register.isEnabled">
    <input type="text" v-model="register.name" :disabled="!register.isEnabled">

    <span v-if="register.saved">Saved</span>
    <span v-else><a @click="save(register)">Save now</a></span>
</div>

我想做的是观察该对象值的变化并将saved属性设置为false。这是我的 Vue 实例的示例版本:

new Vue({
    el: '#app',
    data: {
        registers: [
            { isEnabled: true, name: 'Register 1', saved: true },
            { isEnabled: false, name: '', saved: true },
        ]
    },
    methods: {
        save: function(event) {
            // Save object, set saved to true
        }
    }
});

我尝试使用 v-for 属性为 div 设置 onchange 监听器:

<div v-for="register in registers" @change="onChange(register)">

但是，只有当第一个输入元素发生更改(例如复选框)时才会触发。

我是否能够以某种方式监听对此寄存器对象所做的所有更改，而不必向每个输入添加 @change 事件？如果是这样，怎么办？

Answer 1

Am I able to somehow listen to all changes made to this register object, without having to add a @change event to every single input?

这实际上听起来是一个相当合理的解决方案，特别是因为 the change event doesn't bubble .

我尝试使用 watch 提出解决方案, but since deep watch is not an option for large arrays ，它会变得非常困惑。

new Vue({
    el: '#app',
    ready: function() {
        this.registers.forEach(function(register, index) {
            this.$watch('registers[' + index + ']', function(newRegister, oldRegister) {
              // Check that it wasn't the `saved` state that changed
              if (newRegister.saved === oldRegister.saved) {
                  newRegister.saved = false;
              }
            });
        });
    },
    data: {
        registers: [
            { isEnabled: true, name: 'Register 1', saved: true },
            { isEnabled: false, name: '', saved: true },
        ]
    },
    methods: {
        save: function(event) {
            // Save object, set saved to true
        }
    }
});

然后，如果寄存器属性发生变化，您将必须重新绑定(bind)所有观察者。

因此，仅使用 @change 监听器可能会更轻松。