const navTabList = [
{
label: "VIP",
name: "VIP",
id: 2,
},
{
label: i18n.global.t("Header.downLoad"),
name: "DownLoad",
id: 1,
},
]; 语言变化了 这里面的label值却没有变化
原因:
问题出在 label 属性上。vue3的响应式只会追踪对象的属性访问和修改,而不会追踪属性值的变化。因此,当 i18n.global.t(“Header.gameLibrary”) 返回不同的翻译结果时,navTabList 中的 label 值不会自动更新。
解决办法:
const navTabList = [
{
label: "VIP",
name: "VIP",
id: 2,
},
{
get label() {
return i18n.global.t("Header.downLoad");
},
name: "DownLoad",
id: 1,
}]
我们将 label 定义为一个 getter 函数,该函数通过 i18n.global.t 动态获取翻译结果。由于使用了 computed 属性,每当 i18n.global.t 的结果发生变化时,label 的值也会自动更新。