Vue组件:class绑定computed属性未被触发调用问题咨询

问题原因 #

核心问题是Options API下props的访问方式错误，具体错误点如下：

• 你在计算属性中通过this.props.xxx访问props，Options API中所有声明的props会直接挂载到组件实例this上，不存在this.props这个对象，代码执行到this.props.title就会抛出未捕获错误，直接中断执行，因此你看不到console.log的输出，也拿不到计算属性的返回值。
• 模板中写的props.currency、props.largeValue等同理也是错误写法，Options API模板可以直接访问props属性，不需要加props.前缀。
• 计算属性没有处理非"Calmar Ratio"场景的返回值，会默认返回undefined，可能导致非预期的类名绑定结果。
• 最后一个条件判断存在冗余逻辑，不需要重复判断1 <= this.value。

修复方案 #

第一步：修正计算属性写法 #

将changeCalmarColor中的this.props全部替换为this，补充默认返回值，删掉冗余判断：

computed: {
  changeCalmarColor() {
    console.log("/////VALUE AND TITLE////", this.title, this.value);
    if(this.title == "Calmar Ratio") {
      if(this.value < 1 || this.value == null) {
        return "text-danger";
      } else if(this.value <= 3.00) {  
        return "text-yellow";
      } else if(this.value > 3.00) {
        return "text-green"; 
      }
    }
    // 非匹配场景返回空字符串，避免绑定undefined
    return "";
  },
},

第二步：修正模板中props的引用 #

把模板中所有props.前缀全部删掉：

<!-- 示例修正后的部分模板代码，其余同理替换即可 -->
<div :class="changeCalmarColor" class="content" >
  <div
    v-if="currency"
    :class="[
      'font-bold',
      { 'text-3xl': largeValue, 'text-center': center },
    ]"
  >
    {{ $options.methods.format(value) }}
  </div>
  <!-- 剩余v-else-if、v-else块同理删掉props.前缀即可 -->
</div>

修复后动态类绑定就会正常触发，计算属性也会正常执行输出日志。

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