vue-i18n：如何在内部vue实例过滤器中使用

Question

我想使用过滤器执行翻译。
问题是“ this ”没有指向我的过滤函数中的vue实例。

这就是我目前所拥有的。

在我的模板中，我有这个：

  <p>{{ parking.status | translate }} </p>

在我的组件中，我有这个：

 new Vue({ ...
 filters: {
      translate: function(value, vue) {
          return this.$i18n.t('MLAA-47');
 } 

我得到的错误是这==未定义。
如何将其指向我的filter函数中的vue实例？

Answer 1

正如该答案的评论中的@ vitaly-mosin所指出的那样，您不能this在过滤器函数内部使用。

过滤器主要用于文本转换目的。对于其他指令中的更复杂的数据转换，应改用Computed属性。

我遇到了同样的问题，我决定将$ i18n的翻译移至计算方法，例如：

在模板内部，而不是此：

 <p>{{ parking.status | translate }} </p>

更改为：

<p>{{ translateStatus(parking.status) }} </p>

并在方法中：

methods: {
    translateStatus (status) {
        return this.$t(status)
    }
},

我猜您处于动态状态（并非总是返回：“ MLAA-47”），并且应该断言所有语言都有翻译。它为我工作！

希望它也对您有帮助