Missing required prop: “value” 报错的解决办法

一. 报错场景

在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>

补充：若el-select进行了双向数据绑定，且每一项el-option都进行了value赋值，然而还报了这个错，这时需要检查下每一项绑定value的变量是否都在数组中存在。比如上面的例子，就需要检查下channelList数组中每一项是否都有id这个变量。

（完）