我正在开发一个要迁移到 VueJS 的应用程序,因此某些部分正在使用旧的 jQuery 代码。
所以我正在尝试使用 jQuery 附加一个 VueJS 组件,所以我做了
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
仅供参考,我的翻译消息是在我的 SFC 中使用关键字直接定义的
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,
}));
你有解决这个问题的想法吗?
我尝试在 vue 组件之前加载 i18n 但没有成功,我看到很多 GitHub 问题与此错误有关,但与我的情况不同。