前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错

一. 报错场景

在VUE中使用element-ui的el-select组件时出现该报错

[Vue warn]: Missing required prop: "value"

二. 报错原因

2.1.el-select中没有进行双向数据绑定（v-model）

2.2 el-option没有进行value赋值

三. 具体示例

3.1 报错示例一： el-select中没有进行双向数据绑定，且el-option没有进行value赋值

代码如下：

<el-form-item label="获取积分"><el-select><el-option label="请选择..."></el-option><el-option></el-option></el-select></el-form-item>

运行结果：（界面初始加载时会报以下错，且在点击el-select与切换el-option时都会继续报错）

3.2 报错示例二： el-select中没有进行双向数据绑定，el-option进行了value赋值

代码如下：

<el-form-item label="获取积分"><el-select><el-option label="请选择..." value=""></el-option><el-option value="item.id"></el-option></el-select></el-form-item>

运行结果：（界面初始加载时会报以下错，点击el-select与切换el-option时不会再继续报错）

3.3 报错示例三： el-select中进行了双向数据绑定，el-option没有进行value赋值

代码如下：

<el-form-item label="获取积分"><el-select v-model="channel"><el-option label="请选择..."></el-option><el-option></el-option></el-select>
</el-form-item>

运行结果：（界面初始加载时会报以下错，且在点击el-select与切换el-option时都会继续报错）

四. 解决办法

☆ el-select进行双向数据绑定，且每一项el-option进行value赋值

测试代码如下：（没有了上面的报错情况）

<el-form-item label="获取积分"><el-select v-model="channel"><el-option label="请选择..." value=""></el-option><el-option  value="item.id" ></el-option></el-select></el-form-item>

实际编写代码如下：（没有了上面的报错情况）

<el-form-item label="获取积分"><el-select v-model="channel"><el-option v-for="(item, index) in channelList" :label="item.name" :value="item.id" :key="index"></el-option></el-select>
</el-form-item>

（完）

前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错相关推荐

vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
vue 箭头函数兼容性_前端学习计划之VUE学习（二）
创建一个实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 数据与方法当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式 ...
前端学习（css\vue\react\angular）
2019独角兽企业重金招聘Python工程师标准>>> 无论是在产品设计,还是在研发上,极简主义的应用简直无处不在.如果你和我一样热衷极简主义,那么本文分享的内容,一定是你的&quo ...

前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错

前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错相关推荐

最新文章

热门文章