:class 没有调用 vue 中的计算属性（计算属性没有被调用）

Posted 2023-02-16

【中文标题】:class 没有调用 vue 中的计算属性（计算属性没有被调用）

【英文标题】：:class is not calling the computed property in vue (The computed property is not being called)

【发布时间】：2021-12-17 16:55:37

【问题描述】：

代码：-

     <!--:class="changeCalmarColor" is not working-->
<div :class="changeCalmarColor" class="content" >
 
      <div
        v-if="props.currency"
        :class="[
          'font-bold',
           'text-3xl': props.largeValue, 'text-center': props.center ,
        ]"
      >
         $options.methods.format(props.value) 
      </div>
      <div
        v-else-if="props.millifyOnly"
        :class="[
          'font-bold',
           'text-3xl': props.largeValue, 'text-center': props.center ,
        ]"
      >
         $options.methods.millifyNumber(props.value) 
      </div>
      <div
        v-else
        :class="[
          'font-bold',
           'text-3xl': props.largeValue, 'text-center': props.center ,
        ]"
      >
         props.value 
      </div>
    </div>
 
<script>
import millify from "millify";

export default 
  name: "StatCard",
  props: 
    type: 
      type: String,
      default: "normal",
    ,
    icon: 
      type: String,
    ,
    iconPack: 
      type: String,
      default: "",
    ,
    title: 
      type: String,
      required: true,
    ,
    value: 
      type: [String, Number],
      required: true,
    ,
    currency: 
      type: Boolean,
    ,
    millifyOnly: 
      type: Boolean,
    ,
    largeValue: 
      type: Boolean,
      default: true,
    ,
    center: 
      type: Boolean,
      default: true,
    ,
  ,
  methods: 
    format(val) 
      let millifiedVal = "";
      if (!isNaN(parseFloat(val))) 
        if (parseInt(val).toString().length > 3)
          millifiedVal = millify(val,  precision: 2 );
        else millifiedVal = parseFloat(val).toFixed(2);
        if (millifiedVal.charAt(0) === "-") return `-$$millifiedVal.slice(1)`;
        else return `$$millifiedVal`;
      
      return val;
    ,
    millifyNumber(val) 
      return !isNaN(parseFloat(val)) ? millify(val,  precision: 2 ) : val;
    ,
  ,
  computed: 
    changeCalmarColor() 
      console.log("/////VALUE AND TITLE////", this.props.title, this.props.title);
      if(this.props.title == "Calmar Ratio") 
        if(this.props.value < 1 || this.props.value == null) 
          return "text-danger";
         else if(1 <= this.props.value && this.props.value <= 3.00)   
          return "text-yellow";
         else if(1 <= this.props.value && this.props.value > 3.00) 
          return "text-green"; 
        
      
    ,
  ,
;
</script>

这里:class="changeCalmarColor" 行不工作，计算的属性永远不会被调用。绑定类不起作用。我不知道为什么它没有被调用，我已经明确定义了它。我认为:class="changeCalmarColor" 是将计算属性与类绑定的正确方法。我不明白我到底在做什么错。

我什至尝试显示我的计算属性，如<p>HELLP props.title changeCalmarColor</p>，但它从未被调用。我在控制台中看不到它。

【参考方案1】：

计算属性被缓存，See docs

所以changeCalmarColor 运行一次，然后等待依赖关系发生变化以便再次运行。

它不运行的原因是因为你使用了this.props.title，而你应该使用this.title。

所以这个：

    changeCalmarColor() 
      console.log("/////VALUE AND TITLE////", this.props.title, this.props.title);
      if(this.props.title == "Calmar Ratio") 
        if(this.props.value < 1 || this.props.value == null) 
          return "text-danger";
         else if(1 <= this.props.value && this.props.value <= 3.00)   
          return "text-yellow";
         else if(1 <= this.props.value && this.props.value > 3.00) 
          return "text-green"; 
        
      
    ,

应改为：

    changeCalmarColor() 
      if(this.title == "Calmar Ratio") 
        if(this.value < 1 || this.value == null) 
          return "text-danger";
         else if(1 <= this.value && this.value <= 3.00)   
          return "text-yellow";
         else if(1 <= this.value && this.value > 3.00) 
          return "text-green"; 
        
      
    ,

【参考方案2】：

要访问道具，您应该直接使用this.propName。您可以将计算的道具更改为：

changeCalmarColor() 
      console.log("/////VALUE AND TITLE////", this.title, this.title);
      if(this.title == "Calmar Ratio") 
        if(this.value < 1 || this.value == null) 
          return "text-danger";
         else if(1 <= this.value && this.value <= 3.00)   
          return "text-yellow";
         else if(1 <= this.value && this.value > 3.00) 
          return "text-green"; 
        
      
    

【讨论】：

什么都没有发生，伙计。我删除了第二个类属性并更新了changeCalmarColor()

我编辑了我的答案，再次检查并告诉我

拥有多个类属性其实没问题，只要一个有v-bind:。对不起！

我使用了propName，但没有任何反应，没有错误。我已经编辑了我的问题，计算的属性没有被调用，我不知道为什么它没有被调用

您拥有的所有props. 都应该被删除（也在模板中），不会调用计算的道具，因为它们无效。也请参阅其他答案。