一. 报错场景

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

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

• 1

二. 报错原因

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>

（完）