javascript - 如何在带过滤器的 Vue 模板中使用三元运算符？

Question

我有一个应用程序可以根据桌面或移动设计设置过滤器，但三元运算符不起作用。

这里是组件调用:

<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]: Failed to resolve filter: defineFilter

Answer 1

将您的过滤器移至filters 并删除这两种方法。过滤器将接收数字值作为参数。由于没有 this 访问过滤器中的组件，您可以直接使用您的预定义函数:

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

确保您的两个外部函数都准备好接收数字并返回一个值。这是一个 demo