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>

(完)

讨论数量: 0

慎思笃行