Vue项目el-checkbox首次加载禁用失效、文本渲染正常问题求助

问题根因 #

• 核心错误是disabled属性绑定了字符串类型值：当前代码中三元表达式返回的是'true'/'false'字符串，非空字符串在布尔判定中永远为真，导致禁用逻辑首次加载时判定错误。热重载时因为组件局部重渲染，变量更新触发的二次判定碰巧符合预期，属于偶发现象。
• 次要问题：异步调用写法存在回调嵌套，若Vuex状态映射不当也可能导致响应式更新延迟。

解决方案 #

1. 修正disabled属性绑定
   直接使用布尔值表达式即可，无需额外三元判断，也不要给布尔值加引号：

<!-- 原逻辑为 answer1>0时不禁用，否则禁用，等价于下方写法 -->
<el-checkbox v-model="...." :disabled="answer1 <= 0"></el-checkbox>

如果要保留三元写法，去掉返回值的引号即可：

<el-checkbox v-model="...." :disabled="answer1 > 0 ? false : true"></el-checkbox>

2. 确保Vuex状态响应式映射
   确认组件中answer1/2/3是通过computed映射的Vuex state，避免直接赋值到data导致响应式丢失：

import { mapState } from 'vuex'
export default {
  computed: {
    // 从Vuex根模块映射状态，如果是子模块加对应模块名即可
    ...mapState(['answer1', 'answer2', 'answer3'])
  }
}

3. 优化异步调用逻辑（可选）
   避免async/await和then嵌套混用，改成串行await写法更易维护，同时确保Vuex的action返回Promise：

async mounted(){
  await this.actionSetanswer1({
    props1: '..',
    props2: '..',
  })
  await this.actionSetanswer2({
    props1: '...',
    props2: '...',
  })
  await this.actionSetanswer3({
    props1: '...',
    props2: '...',
  })
}

按照以上方案修改后，无需调用$forceUpdate即可正常触发禁用逻辑的响应式更新。

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