代码之家 › 专栏 › 技术社区 › Jérôme

使用Vue.extend时使用来自SFC的I18n翻译消息

vue-i18n vue-component vuejs2 vue.js javascript

0

Jérôme · 技术社区 · 6 年前

我正在开发一个迁移到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的值作为默认值。

i18n 关键词

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

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,
}));

你有办法解决这个问题吗?

1 回复 | 直到 6 年前

1

Jérôme 6 年前

只需导入并添加 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);
});