:class未调用vue中的计算属性(未调用计算属性)

Question

代码：-

<!--: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>一样显示我的计算属性，但它从未被调用。我在控制台上看不到它。

Answer 1

要访问道具，应该直接使用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"; 
}
}
}

Answer 2

计算属性被缓存，请参阅文档

因此，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"; 
}
}
},