i18n input验证信息rules不改变

有两种方式可以解决表单验证更新问题

第一种：通过computed属性

以基础表单为例，代码如下：

<template>
<div>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item :label="$t('form.Name')" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
form:{
name: ''
}
},
computed: {
rules() {
const rules = {
name: [
{ required: true, message: this.$i18n.t('PleaseInputName'), trigger: blur}
]
}
// 清空表单验证信息
this.$nextTick( () => {
this.$refs['form'].resetFields();
})
return rules;
}
}
}
</script>
第二种：通过控制router-view的显示与隐藏，重渲染路由区域，达到页面刷新效果。代码如下

在App.vue中添加如下代码，可使项目所有表单都可以及时更新。

<template>
<div id="app">
<router-view v-if="isActiveRoute" />
</div>
</template>
<script>
export default {
data() {
return {
isActiveRoute: true
}
},
methods: {
reload() {
this.isActiveRoute = false;
this.$nextTick( () => {
this.isActiveRoute = true;
})
}
},
watch: {
'$i18n.locale'(newVal, oldVal) {
if(newVal != oldVal) {
this.reload()
}
}
}
}
</script>
————————————————
版权声明：本文为CSDN博主「不会么么哒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wqnmlgbsz/article/details/118090926