3

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

这是我目前拥有的。

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

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

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

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

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

4

3 回答 3

7

正如该答案中的评论中的@vitaly-mosin 点所解释的那样，您无法this在过滤器功能中使用。

过滤器主要是为文本转换目的而设计的。对于其他指令中更复杂的数据转换，您应该改用计算属性。

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

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

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

将其更改为： 

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

在方法中：

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

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

希望对你也有帮助

于 2017-10-17T11:19:33.353 回答
0

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

import i18n from '@/i18n.js'

并像这样使用它

i18n.t('your.message')
于 2021-04-21T14:54:30.050 回答
0

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

定义过滤器，如

// 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
于 2021-10-21T13:52:05.537 回答