Vue.js 以非反应式方式存储数据

我试图存储输入字段的旧值，以便检查该值是否已更改。但是，我正在基于属性渲染多个输入，无法在输入更改后确定原始值。所以我尝试使用

数据-

属性。但不幸的是，它们也会改变这些价值观。我怎样才能做到这一点

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

/

---

或者有其他方法可以做到这一点吗？

有几种方法可以实现您的目标。也许最简单的方法是直接将属性添加到实例中，它们不会是被动的

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

如果您需要跟踪

项的更改

，则可以使用监视程序

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

您还可以显式地处理

输入

事件

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