Vue.js中computed属性未触发input禁用状态动态更新问题

问题原因 #

代码失效是两个写法错误导致的：

• 复选框v-model绑定的是formData.useSystemSetting，但计算属性isDisabled里读写的都是根级this.useSystemSetting，没有追踪到复选框实际绑定的响应式变量，计算属性收集不到对应依赖，勾选复选框时自然不会触发重算。
• 计算属性内不允许修改响应式值，你写的三目取反赋值属于副作用操作，违反Vue计算属性的设计规则，会直接打乱响应式更新链路。

修复方法 #

不需要多余的取反赋值逻辑，直接返回对应绑定值即可，注意属性路径要和v-model绑定的路径完全匹配：

修复后的计算属性 #

computed: {
  isDisabled() {      
    return this.formData.useSystemSetting;
  }
}

如果业务要求是勾选复选框时启用输入框、取消勾选时禁用，直接返回!this.formData.useSystemSetting即可，绝对不要在计算属性内部给响应式变量赋值。

极简写法 #

如果禁用逻辑没有其他分支判断，完全不需要单独写计算属性，直接在模板内绑定即可：

<input
  type="text"
  class="form-control"
  :class="hasError('maxCount') ? 'is-invalid' : ''"
  placeholder="Enter the Maximum Count"
  v-model="formData.maxCount"
  :disabled="formData.useSystemSetting"
>

额外提醒：检查data配置项，useSystemSetting必须定义在formData对象内部，和v-model绑定的结构保持一致，不要在data根级重复声明同名属性，否则会出现响应式冲突，导致更新失效。

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