vue表单验证rules国际化处理不能及时更新

最新推荐文章于 2024-05-29 15:42:29 发布

friend_ship

最新推荐文章于 2024-05-29 15:42:29 发布

阅读量3k

点赞数 1

分类专栏： Vue 文章标签： vue vue-i18n表单验证不更新

本文链接：https://blog.csdn.net/friend_ship/article/details/110137730

版权

Vue 专栏收录该内容

45 篇文章 4 订阅

订阅专栏

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

第一种：通过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>