Vue.js中动态表单输入变化时如何自动激活Switch开关

问题根因 #

你对items[index]设置了全属性深度监听，监听回调会捕获该对象下所有属性的变更，包括switch字段本身的修改。当你手动把开关切为OFF时，这个操作也会触发监听回调，原有逻辑会立刻把switch重新设为ON，要么导致你根本切不动开关，要么下次变更时逻辑冲突不生效。

修复方案 #

推荐两种可选方案，优先选第一种，性能和可维护性更好：

方案1：调整监听范围，只监听表单输入字段

不要监听整个item对象，只监听和用户输入相关的表单字段，完全排除switch字段的变更干扰：

this.items.forEach((item, index) => {
  // 替换为你实际业务中每个item下的表单输入字段名
  const formFields = ['name', 'content', 'count'] 
  formFields.forEach(field => {
    this.$watch(`items.${index}.${field}`, (newVal, oldVal) => {
      if (newVal !== oldVal) {
        // 避免重复添加id到changed数组
        if (!this.changed.includes(item.id)) {
          this.changed.push(item.id)
        }
        this.items[index].switch = true
      }
    })
  })
})

方案2：保留全量深度监听，过滤开关变更的情况

如果业务需要必须监听整个item对象，就在回调中对比新旧值时排除switch字段，只有其他表单字段变更时才修改开关状态：

// 工具方法：对比两个item排除switch字段后是否发生变更
function isFormFieldChanged(newItem, oldItem) {
  const compareKeys = Object.keys(newItem).filter(key => key !== 'switch')
  return compareKeys.some(key => newItem[key] !== oldItem[key])
}

// 改造原有watch逻辑
this.items.forEach( (_, index) => {  
  this.$watch(['items', index].join('.'), {
    deep: true, 
    handler: (newVal, oldVal) => {
      if (isFormFieldChanged(newVal, oldVal)) {
        if (!this.changed.includes(newVal.id)) {
          this.changed.push(newVal.id)
        }
        this.items[index].switch = true
      }
    }
  });  
});

如果是Vue3环境，深度监听的旧值不会自动深拷贝，你可以在监听回调中自己维护一份旧值的深拷贝做对比即可。

内容的提问来源于stack exchange，提问作者user1896653