:class가 vue에서 계산된 속성을 호출하지 않습니다(계산된 속성이 호출되지 않음).

:class가 vue에서 계산된 속성을 호출하지 않습니다(계산된 속성이 호출되지 않음).

코드:-

     <!--: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>절대 불리지 않아요.콘솔에서 볼 수 없습니다.

소품에 직접 액세스하려면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는 한 번 실행한 후 의존관계가 변경될 때까지 대기하여 재실행합니다.

실행이 안 되는 이유는 이 명령어를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"; 
        }
      }
    },

언급URL : https://stackoverflow.com/questions/69822692/class-is-not-calling-the-computed-property-in-vue-the-computed-property-is-not