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

Question

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

这是我目前拥有的。

在我的模板中我有这个：

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

在我的组件中我有这个：

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

我得到的错误是 this == undefined。
我如何将它指向我的过滤器函数中的 vue 实例？

Answer 1

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

filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use Computed properties instead.

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

在你的模板中，而不是这个：

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

改为：

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

在方法中：

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

我猜你有一个动态状态（不总是返回：'MLAA-47'），你应该断言你有所有这些的翻译。它对我有用！

希望对你也有帮助

Answer 2

我们可以像这样导入导出国际化实例的文件

import i18n from '@/i18n.js'

然后像这样使用它

i18n.t('your.message')

Answer 3

我不确定这是否是个好主意，但到目前为止它正在做我想要的。

像这样定义过滤器

// the instance.vue will be set on App.vue
export const instance = {
  vue: null
};

// little helper
const t = (key) => instance.vue?.$t?.(key);

export default {
  filter: (v) => v + t('somekey')
}

然后在App.vue（或者你使用的任何东西）中，做

import {instance} from '@/filters'

export default {
  mounted() {
    instance.vue = this; // set the instance here

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

vue-i18n : how to use inside vue instance filter

vue.js

vue-i18n