Javascript 使用Vue.extend时使用来自SFC的I18n翻译消息
我正在开发一个迁移到VueJS的应用程序,因此某些部分使用的是旧的jQuery代码 所以我尝试使用jQuery附加一个VueJS组件,所以我Javascript 使用Vue.extend时使用来自SFC的I18n翻译消息,javascript,vue.js,vuejs2,vue-component,vue-i18n,Javascript,Vue.js,Vuejs2,Vue Component,Vue I18n,我正在开发一个迁移到VueJS的应用程序,因此某些部分使用的是旧的jQuery代码 所以我尝试使用jQuery附加一个VueJS组件,所以我 import copyToClipboard from '../components/_base/VCopyToClipboard'; const CopyToClipboard = Vue.extend(copyToClipboard); $(event.currentTarget).find('.dns-challenge-row').each(
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,
}));
你有办法解决这个问题吗
我试图在vue组件之前加载i18n,但没有成功,我看到了很多GitHub问题与此错误有关,但与我的情况不同。只需导入并将
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);
});