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实例？

- hannes neukermans

---

这个问题已经有答案了：https://dev59.com/SFgQ5IYBdhLWcg3wZDGd - Vitaly Mosin

嗨，汉尼斯，你解决了你的问题吗？有任何答案帮助到你了吗？如果是的话，请尝试标记为已解决，以帮助其他人并保持 S.O 的清洁。谢谢！ - JP. Aulet

Answer 1

正如@vitaly-mosin在评论中解释的那样，你不能在过滤函数内使用this。

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

我遇到了同样的问题，并通过将$i18n翻译移到一个计算方法中来解决，例如：

在模板中，不要使用这样的方式：

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

将其改为：

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

在方法中：

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

我猜你有一个动态状态（不总是返回'MLAA-47'），应该确认你已经为所有状态提供了翻译。这对我起作用了！希望也能对你有所帮助。

- JP. Aulet

Answer 2

我不确定这是否是一个好主意，但目前它正在做我想要的事情。

像这样定义过滤器

// 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

- Mike Mat

Answer 3

我们可以像这样导入文件导出i18n实例

import i18n from '@/i18n.js'

并像这样使用它

i18n.t('your.message')

- Alonad