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博主「friend_ship」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/friend_ship/article/details/110137730