写了一个隐藏一列的方法，一直报错KEY没有定义，但是页面上定义了

Question

写了一个隐藏一列的方法，一直报错KEY没有定义，但是页面上定义了，并且我在项目的其他页面复用的时候都是可以用的，就单独这一个页面报错，检查了key是定义了的，开始我以为重名，然后把名字重新定义了一遍之后，还是一直报这个错误!也不是页面缓存问题，还请大神指教

  <li>
                      <el-checkbox-group v-model="columnChangeList" v-for="(listData,index) in columnsList" :key="listData.dataIndex">
                        <el-checkbox :label="listData.dataIndex" @change="columnChange">{{listData.text}}</el-checkbox>
                      </el-checkbox-group>
 </li>

---

  computed:{
      lineListData(){
        console.log(this.columnsList)
        return  this.columnsList.map((item,index)=>{
            return item.dataIndex
          })
      }
    },
  mounted(){
    this.columnChangeList=this.lineListData;
    this.newColumnsList=this.columnsList
  },
    methods:{
//    隐藏一列
      showClik(){
        this.isHide=!this.isHide
      },
      showHide:function(){
        this.isHide=false
      },
      columnChange(){
          this.newColumnsList=[];
        console.log(this.columnChangeList);
        this.columnsList.forEach((item,index)=>{
          this.columnChangeList.forEach((val,ind)=>{
            if(val==item.dataIndex){
                this.newColumnsList.push(item)
        }
        })
        })
      },

---

Answer 1

应该是你的key值有相同的值。

建议你使用v-for的index索引当key，这样肯定不会重复。

<li>
  <el-checkbox-group v-model="columnChangeList" v-for="(listData,index) in columnsList" :key="index">
    <el-checkbox :label="listData.dataIndex" @change="columnChange">
      {{listData.text}}
    </el-checkbox>
  </el-checkbox-group>
</li>