Как использовать тернарный оператор в шаблоне Vue с фильтром?
У меня есть приложение для установки фильтра в зависимости от настольного или мобильного дизайна, но тернарный оператор не работает.
Вот вызов компонента:
<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]: не удалось разрешить фильтр: defineFilter
@NileshPatel, я не знаю, не работает Vue возвращает предупреждение «Не удалось разрешить фильтр: определить фильтр»
Это потому, что это в вашем methods. Переместите его в filters.
@Дэн, но как? переместить мой метод defineFilter в фильтры?
Да, фильтры — это тоже просто функции
@Dan Я пытался, но получил Невозможно прочитать свойство "$options" неопределенного
Как правило, вы не должны использовать $options в своем компоненте. Какие данные вы фильтруете? Это больше похоже на то, что вам все равно нужен метод
@Dan Я фильтрую любое число, вопрос в том, что фильтр заставляет его форматироваться с другим отображением, и эти отформатированные данные должны передаваться в качестве опоры для дочернего компонента.
Какая переменная содержит число?
@Dan — это состояние карты vuex, называемое «highlightData.available», в данном случае равно 1805,85.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Переместите фильтр на filters и удалите оба метода. Фильтр получит числовое значение в качестве аргумента. Поскольку в фильтре нет this доступа к компоненту, вы можете напрямую использовать предопределенные функции:
filters: {
defineFilter(num) {
const test = true;
return test ? decimalFilter(num) : shortedNumberFilter(num);
}
}
Убедитесь, что обе ваши внешние функции готовы принять число и вернуть значение. Вот демо
это выглядит хорошо для меня. почему вы думаете, что он не работает?