How to use ternary operator in Vue template with filter?
·
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
更多推荐

所有评论(0)