首页 / 脚本样式 / Element UI / Missing required prop “value” 报错的解决办法

一. 报错场景

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