필터와 함께 Vue 템플릿에서 3진 연산자를 사용하는 방법

필터와 함께 Vue 템플릿에서 3진 연산자를 사용하는 방법

바탕화면이나 모바일 디자인에 따라 필터를 설정하는 앱이 있는데 3진 연산자가 작동하지 않습니다.

컴포넌트 콜은 다음과 같습니다.

<Metric
    prefix="R$"
    :is-numeric-subvalue="false"
    :is-total="true"
    subvalue="Abril à Maio"
    title="Disponível"
    :value="highlightData.available | defineFilter()"
/>

필터를 정의하는 방법은 다음과 같습니다.

methods: {
  defineFilter () {
    const test = true
    const filter = test ? this.$options.filters.decimal(0) : this.$options.filters.shortedNumber()
    return filter
  }
}

내 필터:

filters: {
  decimal: decimalFilter,
  shortedNumber: shortedNumberFilter
}

경고를 받았습니다.

[Vue warn] :필터를 확인하지 못했습니다. defineFilter

필터 이동처filters두 가지 방법을 모두 제거합니다.필터는 인수로서 number 값을 수신합니다.없기 때문에this필터의 컴포넌트에 액세스 할 수 있습니다.사전 정의된 기능을 직접 사용할 수 있습니다.

filters: {
  defineFilter(num) {
    const test = true;
    return test ? decimalFilter(num) : shortedNumberFilter(num);
  }
}

양쪽 외부 함수가 번호를 수신하고 값을 반환할 준비가 되어 있는지 확인합니다.여기 데모가 있습니다.

언급URL : https://stackoverflow.com/questions/65413062/how-to-use-ternary-operator-in-vue-template-with-filter