Question

我正在尝试存储输入字段的旧值，以便可以检查该值是否已更改。但是，我基于一个属性渲染多个输入，并且在输入更改后无法确定原始值。因此，我尝试使用data-属性。但不幸的是，它们也会改变那里的价值。我该怎么做到。

<input v-for="item in items" 
       :value="item.value" 
       :data-originalValue="item.value" <!-- this shall not change -->
/>

或者还有另一种方法吗？

Answer 1

有几种方法可以实现您想要的。也许最简单的方法是直接向实例添加属性，而这些属性不会是被动的。

created() {
    this.originalValues = this.items.map(item => item.value);
}

如果您需要跟踪对items的更改，则可以使用观察者

watch: {
    items: {
        immediate: true,
        handler(newValue) {
           this.originalValues = this.newValue.map(item => item.value);
        }
    }
}

您还可以显式处理input事件

<input
    v-for="item in items"
    :value="item.value"
    @input="onInput(item, $event)"
/>

然后在处理程序中

methods: {
    onInput(item, event) {
       // item is the item that changed
       // event.target.value is the new value
    }
}

以非反应方式存储数据

1 个答案: