在vue 中 this.form.List 观察这个数组的每一项变化,若改变则让其恢复原始值且同步页面渲染

在Vue中，如果你想监听`this.form.List`数组中的每一项变化，并在更改时将其恢复到原始值并更新页面，你可以使用`watch`属性或者`v-model`结合`deep`选项。这里是一个简单的示例：

<template>
  <div>
    <ul v-for="(item, index) in form.List" :key="index">
      <li>
        <input type="text" v-model="form.List[index].fieldToWatch">
        <button @click="resetItem(index)">重置</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        List: [
          { fieldToWatch: '初始值1' },
          { fieldToWatch: '初始值2' },
          // 更多列表项...
        ]
      }
    };
  },
  methods: {
    resetItem(index) {
      this.$set(this.form.List, index, {
        fieldToWatch: // 这里可以设置为原值或者其他处理逻辑，默认保持不变
      });
      // 如果你想同步视图，可以在resetItem方法结束后调用$forceUpdate()
      this.$forceUpdate();
    }
  },
  watch: {
    // 使用 deep 选项来深度监听数组变化
    form.List: {
      handler(newList, oldList) {
        for (let i = 0; i < newList.length; i++) {
          if (newList[i] !== oldList[i]) {
            // 如果有变化，执行重置操作
            this.resetItem(i);
          }
        }
      },
      deep: true,
    }
  }
};
</script>

在这个例子中，我们使用`v-model`绑定了数组元素的`fieldToWatch`字段，当输入框内容发生改变时，`resetItem`方法会被触发。`$set`用于安全地修改对象的属性，防止`__proto__`链的影响。