Используйте I18n перевод сообщений из SFC при использовании Vue.extend - PullRequest
Новая
       24

Используйте I18n перевод сообщений из SFC при использовании Vue.extend

0 голосов
/ 14 декабря 2018

Я работаю над приложением, которое перенесу на VueJS, поэтому некоторые части используют старый код jQuery.

Поэтому я пытаюсь добавить компонент VueJS с помощью jQuery, поэтому я сделал 

import copyToClipboard from '../components/_base/VCopyToClipboard';

const CopyToClipboard = Vue.extend(copyToClipboard);
  $(event.currentTarget).find('.dns-challenge-row').each((index, element) =>     {
    const component = new CopyToClipboard({
      propsData: {
        targetId: $(element).find('code').attr('id'),
      },
    }).$mount();

    $(element).append(component.$el);
  });

Все работает, НО, когда я захожу на страницу, где добавлен этот компонент, i18n возвращает ошибку

Невозможно перевести значение keypath 'tooltip.default'.Используйте значение keypath по умолчанию.

К вашему сведению, мои переводческие сообщения напрямую определяются внутри моего SFC с помощью ключевого слова i18n 

i18n: {
  messages: {
    en: {
      tooltip: {
        default: 'Copy content',
        success: 'Copied',
      },
    },
    fr: {
      tooltip: {
        default: 'Copier le contenu',
        success: 'Copié',
      },
    },
  },
},

, и я использую его непосредственно внутри SFC, используя this.$t('tooltip.default')

Мой i18n импортируется, как говорят документы, но загружается после vue.js, который я использую для создания своего компонента. 

import {
  Vue,
} from './vue';
import VueI18n from 'vue-i18n';
import en from '../../translations/en';
import fr from '../../translations/fr';

Vue.use(VueI18n);

export default new VueI18n({
  locale: document.getElementsByTagName('html')[0].getAttribute('lang'),
  messages: {
    en,
    fr,
  },
});

Файл vue.js - это файл, в который я помещаю все свои Vue.use() определения, мой рутер, другие вещи и используется для создания экземпляра Vue внутри другого файла 

vueSetup(new Vue({
  el: '#app',
  components: {
    ...
  },
  i18n: i18n,
  router: router,
  store: store,
}));

У вас есть идея, чтобы решить эту проблему?

Я пытался загрузить i18n до того, какКомпонент vue не увенчался успехом, и я видел много проблем с GitHub с этой ошибкой, но не как в моем случае.

1 Ответ

0 голосов
/ 26 декабря 2018

Просто импортируйте и добавьте i18n экземпляр к новому экземпляру компонента 

const CopyToClipboard = Vue.extend(copyToClipboard);
  $(event.currentTarget).find('.dns-challenge-row').each((index, element) =>     {
    const component = new CopyToClipboard({
      i18n: i18n,
      propsData: {
        targetId: $(element).find('code').attr('id'),
      },
    }).$mount();

    $(element).append(component.$el);
});
...