Javascript v-for中的VueJS事件绑定

我正在使用VueJ显示对象列表，如下所示：

<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>

我尝试使用

v-for

属性将onchange侦听器设置为div：

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

但是，这仅在第一个输入元素更改时触发（例如，复选框）

我是否能够以某种方式侦听对此寄存器对象所做的所有更改，而不必向每个输入添加

@change

事件？如果是，怎么做

我是否能够以某种方式侦听对该寄存器对象所做的所有更改，而不必向每个输入添加@change事件

事实上，这听起来是一个相当合理的解决方案，尤其是因为

我试着用它来想出一个解决方案，它会变得相当混乱

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
        }
    }
});

然后，您必须重新绑定所有观察者，以防寄存器属性发生变化

---

因此，只使用

@change

侦听器可能更容易。

一般同意nils。。。在数组中要查看的每个项目的属性上运行循环。。。虽然为零，但我认为是这个。$watch设置侦听器，而不是这个。watch；）谢谢，更正了；）不过，我并不支持我的解决方案，我更支持OP的解决方案：）

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
        }
    }
});