Vue I18n多语言
Vue I18n多语言
提问于 2022-04-05 02:08:41
我正在使用vue js进行多语言支持，一切都很好，但是当我更改语言时，数据menuItem名称中的数据不会改变。
<template v-slot:MenuItem>
<MenuItems v-for="(Item,Index) in menuItem"
:key="Index"
:items="Item"
:depth="Index"
>
<router-link :to="Item.path">{{Item.name}}</router-link>
</MenuItems>
</template>
export default {
name: "Nav",
data() {
return {
menuItem: [
{
name: this.$t('navbar.home'),
path: '',
},
{
name: this.$t('navbar.gallery'),
path: 'gallery',
},
{
name: this.$t('navbar.contact'),
path: 'contact',
},
],
}
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-05 03:40:57
数据()只在创建组件时调用一次，而且它不打算是反应性的。(因此，基本上在创建组件时，它将当前的转换作为初始值)
要使属性对$t()进行反应性，您应该使用计算的var来代替：
export default {
name: "Nav",
data() {
// exclude from here
return {};
},
computed: {
menuItem() {
return [
{
name: this.$t("navbar.home"),
path: "",
},
{
name: this.$t("navbar.gallery"),
path: "gallery",
},
{
name: this.$t("navbar.contact"),
path: "contact",
},
];
},
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71749895
复制相关文章
相似问题
Vue i18N SAP多语言最佳实践？
vue.js -使用i18n的弹出窗口中的多语言
Django多语言(i18n)和SEO
vue3 i18n，如何结合Vue路由器+ i18n？
ExtJS -带有i18n文本的多语言
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
