vuedata中使用i18n多语言配置-切换语言不生效-解决computed
写在 data 初始化的时候拿到这些被国际化的值,并不能响应变化。
官方的解决办法是,建议我们将表达式写到computed属性里,不要写到data中使用
<div>{{$t('k.state')}}</div> // 可以动态改变
data() {
return {
dyh: this.$t('k.state') //只能拿到初始化时的多语言,不能动态改变
}
}
computed: {
// 导航多语言 可以动态改变 ----官方推荐
sideBarList(){
return [
{
"icon": "eth",
"name": this.$t("Common.name"),
"path": "/index"
}
]
}
},
使用监听方式也可以实现
<template>
<div>
<div class="solutions">{{ solutions }}</div>
</div>
</template>
<script>
export default {
watch: {
'$store.state.lang'(language) {
this.init()
}
},
data() {
return {
solutions : this.$t('solutions')
}
},
created() {
this.init()
},
methods: {
init(){
this.solutions = this.$t('solutions')
}
},
}
</script>
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634218.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现