v-for删除自定义组件的坑

问题描述

本质描述：当删除自定义组件的时候，总是删除最后一个组件。删除方法是 splice(index, 1);

普通描述：自定义了一个单选题组件，比如是radio.vue。在createSurvey.vue中引入了该组件，创建了三个相同的radio组件，每个radio.vue设置了不同的选项。

出现的场景

v-for嵌套自定义的子组件，才会出现以上问题。

原因

1、当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
2、如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
3、为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

解决：每次新增一个自定义组件，都要单独设置一个独一无二的myid（myid是我自定义的一个名称）

//显示所有的组件和删除按钮。一个组件有一个删除按钮。
<div v-for="(item,index) in questionComponent" :key="item.myid"  > <!--  -->
    <li v-bind:is="item.newCom" ></li>  <!--使用v-bind:is，只能显示组件-->
    <el-button type="" @click="delQuesion(index)"></el-button>
</div>

//每个组件都有一个独一无二的myid
questionComponent: [
     {
          myid:1,
          newCom:radio
     }
]

//每次生成新组件的操作，必须得生成一个新的myid
 setRadio: function () { //生成一个单选题 radio
    let size=this.questionComponent.length+1;
    var json={
          myid:size,
          newCom:radio
    };
    this.questionComponent.push(json);
}

//删除
 delQuesion: function (index) {
        this.questionComponent.splice(index, 1);
},

:key的位置需要放正确。

正确

<div v-for="(item,index) in questionComponent" :key="item.myid"  > <!--  -->
    <li v-bind:is="item.newCom" ></li>  <!--使用v-bind:is，只能显示组件-->
    <el-button type="" @click="delQuesion(index)"></el-button>
</div>

错误

<div v-for="(item,index) in questionComponent"  > <!--  -->
    <li v-bind:is="item.newCom" :key="item.myid" ></li>  <!--使用v-bind:is，只能显示组件-->
    <el-button type="" @click="delQuesion(index)"></el-button>
</div>