Блог

Главная - Вопросы по программированию - Как использовать троичный оператор в шаблоне Vue с фильтром?

Как использовать троичный оператор в шаблоне Vue с фильтром?

#javascript #function #vue.js #vuejs2 #vue-component

#javascript #функция #vue.js #vuejs2 #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

Комментарии:

1. для меня это выглядит хорошо. как вы думаете, почему он не работает?

2. @NileshPatel я не знаю, не работает, Vue возвращает предупреждение «Не удалось разрешить filter: defineFilter»

3. Это потому, что это в вашем methods . Переместите его в filters .

4. @Dan но как? переместить мой метод defineFilter в filters?

5. Да, фильтры — это тоже просто функции

Ответ №1:

Переместите фильтр в filters и удалите оба метода. Фильтр получит числовое значение в качестве аргумента. Поскольку в фильтре нет this доступа к компоненту, вы можете напрямую использовать свои предопределенные функции:

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

Убедитесь, что обе ваши внешние функции готовы к получению числа и возвращению значения. Вот демонстрация