记一次iview-form model对象内某个属性valida

最近给一位同事解决了一个很难发现的问题，我们先来看下下面这段代码

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formInline: {
                    password: ''
                },
                ruleInline: {
                    user: [
                        { 
                          required: true, 
                          message: 'Please fill in the user name', 
                          trigger: 'blur',
                          validator: function(rule, value, callback) {
                            console.log(value)
                            return new Promise((resolve, reject) => {
                               if(value) resolve(true)
                               else reject(false)
                            })
                          }
                        }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {            
            this.formInline.user = ''
        },
        methods: {
            handleSubmit(name) {
                console.log(this.$refs[name]) 
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        }
    }
</script>

以上是一个form表单校验规则的编写，我们采用了初始化form联动的modal对象拆为了两部分来写

第一部分在data内

formInline: {
  password: ''
},

• 这里声明了password属性

第二部分在created内

created() {
  this.formInline.user = ''
}

这样导致的结果是无论页面输入框user输入任何值，rules内user的validator自定义函数内拿到的value值始终为 created内赋值的值，也就是空值，导致validate永远过不去

问题.png

原因分析

1、Form内的model为formInline，只是将password加入了Object.difinePropertity的监听机制内，后面通过this.formInline.user 加入的属性值没能监听到值的联动变化，导致rules内user提取到的值永远是初始值；

解决思路

1、created内附加属性的通过set去做

this.$set(this.formInline, 'user', '')

2、保持在原始对象内就有user属性值存在 这样能够成功加入到监听机制内

formInline:{
    user: '',
    password: ''
}

真实的业务场景问题

• 张三在初始model对象内有属性值存在的，但是在created()函数内 不小心写了这样一句话

created() {
   const { userBase }  = this.datas  // 这个对象内有 userBase { password: '',  sex: '男', name: ''}
    this.formInline = userBase   // 这里将原本加入了rule规则内的user属性给丢掉了

    this.formInline.user = 'stepday' // 这里通过这种方式设置属性user的初始值
}

最后的修改处理

1、对象合并的写法改变

- this.formInline = userBase
+ Object.assign(this.formInline, userBase) // 确保formInline内的属性值不会丢掉  破坏rule规则

写在最后的话

• 对象拆分的情况下务必使用vue.set 将对象加入监听机制内
• 对象赋值的时候尽可能要确保属性丢失的情况，尽可能采用对象合并 Object.assign 拷贝模式
• 将vue2.x系列的Object.defineProperty机制原理深入脑海
• 以上问题如果是vue3 用proxy来监听就不会有这样的问题存在