vue-i18n: как использовать фильтр экземпляра vue

Question

Я хочу использовать фильтр для выполнения переводов.
Проблема в том, что "this" не указывает на мой экземпляр vue внутри моей функции фильтра.

Это то, что у меня сейчас есть.

внутри моего шаблона у меня есть это:

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

внутри моего компонента у меня есть это:

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

Я получаю ошибку, что это == неопределено.
Как мне указать на мой экземпляр vue внутри функции фильтра?

Answer 1

Как указывает @italy-mosin в комментарии к ответу, вы не можете использовать this внутри функции фильтра.

Фильтры в первую очередь предназначены для преобразования текста. Для более сложных преобразований данных в других директивах вы должны использовать вместо этого свойства Computed.

У меня была та же проблема, и я решил переместить перевод с $i18n в вычисляемый метод, например:

Внутри вашего шаблона вместо этого:

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

Измените это на:

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

И в методах:

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

Я предполагаю, что у вас динамический статус (не всегда возвращается: "MLAA-47"), и вы должны утверждать, что у вас есть переводы для всех из них. Это сработало для меня!

Надеюсь, это поможет и вам

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

Answer 3

Мы можем импортировать файл, экспортирующий экземпляр i18n следующим образом

      import i18n from '@/i18n.js'

И используйте это так

      i18n.t('your.message')