今天周日，本来是双休的，被骗来改bug，服了，现在公司就我独自一人了

报错信息：

打开pc端页面，控制台直接报错，报错如下：

 错误分析：

1.上面发出了vue的警告，意思是这个value为必须的，不可缺少

2.发现提示的位置为el-select组件

打开代码：

1.报错为value，此处value有两个位置使用（el-option，el-select）

观察：el-option进行了value赋值，el-select并未使用双向绑定（已定位）

<el-form-item label="是否订货会：" >
        <el-select
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>

解决方案:

1.忘记用双向绑定的情况下（如上面的），记得用双向绑定即可，v-model

2.研究其他情况：（控制变量法）

  2.1.两个value都不用

  <el-form-item label="是否订货会：" >
<el-select
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="是" ></el-option>
          <el-option label="否" ></el-option>
        </el-select>
     </el-form-item>

请看上面的效果图，两项都高亮了，并且默认选中了一项，并且无法切换，因为没有绑定value，没有使其每一项变成唯一的；

其中默认的选中是有规律的，选中最后一条label，不信可以亲自试下（本人已试过）

   2.2.使用双向绑定，但是el-option的value不用

<el-form-item label="是否订货会：" >
        <el-select
    v-model="queryParams.type"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="是" ></el-option>
          <el-option label="否" ></el-option>
        </el-select>
      </el-form-item>

进入页面会报错，且在点击el-select与切换el-option时都会继续报错，其中报错信息为上面有两个报错图的第二个报错，select的下拉有问题

其他注意点：

如下图，使用了循环，但是假如brandNo有重复，就会报错key存在重复，

   <el-form-item label="品牌名称：" prop="brandNo">
        <el-select
          v-model="queryParams.brandNo"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in brandOptions"
            :key="item.brandNo"
            :label="item.brandName"
            :value="item.brandNo"
          ></el-option>
        </el-select>
      </el-form-item>

解决：循环增加index，因为索引在这肯定是唯一的，使用索引作为key，用item.id的话你要保证后台库里的id不会存在重复的即可。

 
          <el-option
            v-for="(item,index) in brandOptions"
            :key="index"
            :label="item.brandName"
            :value="item.brandNo"
          ></el-option>

还有就是可以用value-key来解决:

value-key="id"的id，要和下面的key的参数一样的即可

   <el-form-item label="品牌名称：" prop="brandNo">
        <el-select
          value-key="id"
          v-model="queryParams.brandNo"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in brandOptions"
            :key="item.id"
            :label="item.brandName"
            :value="item.brandNo"
          ></el-option>
        </el-select>
      </el-form-item>