elementUI 下拉选择框无法验证问题

最新推荐文章于 2024-03-30 00:08:53 发布

weixin_42596624

最新推荐文章于 2024-03-30 00:08:53 发布

阅读量1k

点赞数 2

分类专栏：弯路文章标签： vue elementui html

本文链接：https://blog.csdn.net/weixin_42596624/article/details/125718539

版权

弯路专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<el-form-item label="ID" :label-width="formLabelWidth" prop="id">
<el-select v-model="form.collection.id" >
<el-option v-for="c in list" :key="c.id" :label="c.name" :value="c.id"></el-option>
</el-select>
</el-form-item>

原因：v-model="form.collection.id"，里面的id嵌套了太多层

此时如果prop="collection.id"，会报错，

如果prop="collection"，会不显示验证

如果prop="id"，虽然为空时有显示错误提示，但是就算选择了选项，提示也不会消失

解决方法：

新起一个单层级的名称，如：v-model="form.collectionId"

<el-form-item label="ID" :label-width="formLabelWidth" prop="collectionId">
<el-select v-model="form.collectionId" >
<el-option v-for="c in list" :key="c.id" :label="c.name" :value="c.id"></el-option>
</el-select>
</el-form-item>

再在适当位置赋值即可：this.form.collectionId = this.form.collection.id