Answer a question

I have an app to set a filter depending on desktop or mobile design, but the ternary operator doesn't work.

Here is the component call:

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

Here is my method to define the filter:

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

My filters:

filters: {
  decimal: decimalFilter,
  shortedNumber: shortedNumberFilter
}

I received the warning:

[Vue warn]: Failed to resolve filter: defineFilter

Answers

Move your filter to filters and remove both methods. The filter will receive the number value as an argument. Since there is no this access to the component in a filter, you can use your predefined functions directly:

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

Make sure that both of your external functions are prepared to receive the number and return a value. Here's a demo

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐