Element UI报错总结

vue控制台报错Duplicate keys detected: ‘xxxx’. This may cause an update error.解决方案

        <el-form-item label="商品名称" prop="goods_name">
          <el-select
            v-model="addFormField.goods_name"
            placeholder="请选择"
            @change="changeGoodsName"
          >
            <el-option
              v-for="item in goods"
              :key="item.goods_code"
              :label="item.goods_name"
              :value="item.goods_code"
            ></el-option>
          </el-select>
        </el-form-item>

上面这样子写报错
Element UI报错总结
只要一进入该页面,就会出这个红色的错误,网上查了资料,说是v-for循环里,key值可能重复了,所以会报这个错。查看了下,页面果然有v-for循环.
key值是必须唯一的,如果重复就会报错可以把key值改为index(其实就是用索引做key值),就可以避免这个情况:

    <el-form-item label="商品名称" prop="goods_name">
      <el-select
        v-model="addFormField.goods_name"
        placeholder="请选择"
        @change="changeGoodsName"
      >
        <el-option
          v-for="(item,index) in goods"
          :key="index"
          :label="item.goods_name"
          :value="item.goods_code"
        ></el-option>
      </el-select>
    </el-form-item>
上一篇:shell-script – 计算并合并连续模式


下一篇:java.lang.IllegalStateException: Duplicate key 20