this.addDialogForm.chooseList watch 数组中的每一项变化,若改变则恢复原值

在 Vue.js 中，如果你有一个名为 `chooseList` 的数组，并且你想监听这个数组中每一项的变化以便于在发生修改时恢复原始值，你可以使用 `watch` 钩子配合数组的 `$set` 或 `push/pop/splice` 等操作。假设你的 `this.addDialogForm` 对象已经有一个 `chooseList` 属性，这里是一个示例：

<template>
  <!-- ... -->
</template>

<script>
export default {
  data() {
    return {
      addDialogForm: {
        chooseList: [] // 初始化一个空数组
      }
    };
  },
  methods: {
    handleChoiceChange(index, value) {
      // 这里可以添加你的逻辑，例如尝试恢复原始值，如果不行就忽略
      if (value !== this.addDialogForm.chooseList[index].originalValue) {
        this.addDialogForm.chooseList.$set(index, this.addDialogForm.chooseList[index].originalValue); // 使用 $set 更新指定索引处的值
      }
    }
  },
  watch: {
    chooseList(newList, oldList) {
      newList.forEach((item, index) => {
        // 假设每个元素都有 originalValue 属性存储原始值
        if (!item.hasOwnProperty('originalValue')) {
          item.originalValue = item; // 如果没有原始值，直接复制当前项
        }

        new Vue({ // 使用 Vue 实例化临时监控对象
          el: {},
          data: {
            itemBeingWatched: item
          },
          mounted() {
            this.$watch('$data.itemBeingWatched', (newVal, oldVal) => {
              if (newVal !== oldVal) {
                this.handleChoiceChange(index, newVal);
              }
            });
          }
        }).$destroy(); // 退出监控，避免内存泄漏
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个临时的 Vue 实例来监视 `chooseList` 中的每一个元素，每当其值发生变化时，就会触发 `handleChoiceChange` 方法尝试恢复原始值。