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属性设置一个onchange监听器：

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

然而，这仅在第一个输入元素被更改时触发（例如复选框）。

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

Answer 1

我是否能够以某种方式监听对此寄存器对象所做的所有更改，而无需在每个输入中添加@change事件？

这实际上听起来是一个非常合理的解决方案，尤其是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
        }
    }
});

然后，如果寄存器属性发生变化，您将不得不重新绑定所有观察者。

因此，只使用@change听众可能会更容易。

V-for中的VueJS事件绑定

1 个答案: