el-form-item的v-modal绑定是一个对象时，校验规则不生效

胆小鬼゛

已于 2024-01-19 10:47:56 修改

阅读量778

点赞数 9

文章标签： vue.js javascript elementui

于 2024-01-19 10:46:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44799030/article/details/135691678

版权

文章描述了在使用ElementUI的el-select组件时，当v-model绑定的对象属性发生变化时，验证失效的问题。通过测试和调整，发现解决方案是将rules精确到对象的字段，确保验证规则正确作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用el-select的v-modal绑定的是一个对象，测试发现没有选择选项，valid却是true;
以前一直这么写，没有发现这个问题，唯一不同就是绑定的对象

代码如下：

            <el-form :model="updateForm"  ref="updateForm" :rules='rules' label-width="100px" >
                <el-form-item label="项目联系人"  prop="updatecontactUser" >
                    <el-select v-model="updateForm.updatecontactUser"  value-key="id" filterable remote :remote-method="getAllUser" :loading="updatecontactloading" placeholder="请选择项目联系人(可输入邮箱或姓名检索)" style="width: 90%">
                        <el-option
                                v-for="itemUser in allUserList"
                                :key="itemUser.id"
                                :label="itemUser.username"
                                :value="itemUser">
                            <span style="float: left">{{ itemUser.username||'' }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ itemUser.userEmail||''}}</span>
                        </el-option>

                    </el-select>

                </el-form-item>


updateForm:{
                    updatecontactUser:{},//指定的项目联系人信息
                    projectID:'',
                    }，
rules: {
          updatecontactUser: [
                        { required: true, message: '请选择项目联系人', trigger: 'change'  }
                    ],},

于是添加一个绑定的非对象进行测试

            <el-form :model="updateForm" ref="updateForm" :rules='rules' label-width="100px">
                <el-form-item label="项目联系人" prop="updatecontactUser">
                    <el-select v-model="updateForm.updatecontactUser" value-key="id" filterable remote
                               :remote-method="getAllUser" :loading="updatecontactloading"
                               placeholder="请选择项目联系人(可输入邮箱或姓名检索)" style="width: 90%">
                        <el-option
                                v-for="itemUser in allUserList"
                                :key="itemUser.id"
                                :label="itemUser.username"
                                :value="itemUser">
                            <span style="float: left">{{ itemUser.username||'' }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ itemUser.userEmail||''}}</span>
                        </el-option>

                    </el-select>

                </el-form-item>
                <el-form-item label="项目联系人" prop="updatecontactUser1">
                    <el-select v-model="updateForm.updatecontactUser1" placeholder="请选择项目联系人(可输入邮箱或姓名检索)"
                               style="width: 90%">
                        <el-option
                                v-for="itemUser in allUserList"
                                :key="itemUser.id"
                                :label="itemUser.id"
                                :value="itemUser.id">
                            <span style="float: left">{{ itemUser.username||'' }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ itemUser.userEmail||''}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

                updateForm: {
                    updatecontactUser: {},//指定的项目联系人信息
                    projectID: '',
                    updatecontactUser1: '',
                },
                rules: {
                    'updatecontactUser': [
                        {required: true, message: '请选择项目联系人', trigger: 'change'}
                    ],
                    updatecontactUser1: [
                        {required: true, message: '请选择项目联系人', trigger: 'change'}
                    ],
                },