起因
最近想拿vue3 练练手,在编写表单时使用了element plus 的form表单,在编写校验提醒时遇到如下问题
无论如何切换语言,message 始终提示的是中文语言包
const i18n = useI18n()
const rules = ref({
username: [
{
required: true,
trigger: 'blur',
message: i18n.t('message.usenameRule')
}
],
...
})
如上编写代码后, 无论如何切换语言 message 始终是用的中文语言包,查了半天资料后,发现网上的相关例子也是这样写,但没有问题。
解决
在外面包一层 computed就可以解决
怀疑是因为i18n丢失了响应式,套了一层computed 使得message 获取的是一个计算属性,计算属性依赖i18n 达到了更新的作用
const usernameRuleMessage = computed(()=> i18n.t('message.usenameRule') )
const rules = ref({
username: [
{
required: true,
trigger: 'blur',
message: usernameRuleMessage
}
],
...
})
后续
具体产生原因还没有发现,在js文件中使用i18n 功能就能正常使用,useI18n 使用就必须套一层 computed
目前版本 vue-i18n: ^9.1.10