:class未呼叫vue中的計算屬性（未呼叫計算屬性）

代碼：-

     <!--: is not working-->
<div :  >
 
      <div
        v-if="props.currency"
        :
      >
        {{ $options.methods.format(props.value) }}
      </div>
      <div
        v-else-if="props.millifyOnly"
        :
      >
        {{ $options.methods.millifyNumber(props.value) }}
      </div>
      <div
        v-else
        :
      >
        {{ 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>

此處該行:不起作用，從不呼叫計算屬性。系結類不起作用。我不知道為什么它沒有被呼叫，我已經明確定義了它。我認為:是將計算屬性與類系結的正確方法。我不明白我在這里做錯了什么。

我什至試圖顯示我的計算屬性，<p>HELLP {{props.title}} {{changeCalmarColor}}</p>但它從未被呼叫過。我在控制臺中看不到它。

uj5u.com熱心網友回復：

要訪問道具，您應該直接使用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"; 
        }
      }
    }

uj5u.com熱心網友回復：

計算屬性被快取，請參閱檔案

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

標籤：Vue.js Vuejs2 Vue 组件 vuetify.js 计算属性

上一篇：jsPDF未定義

下一篇：如何開始使用Vuejs/Nuxtjs應用程式中的@jsplumb/browser-ui？