【Vue】我想求助一下，关于vue删除组件总是删除最后一个组件，也就是最新添加的组件。

[人在風雨中]

<div style="padding-left: 190px" class="form-inline">
            <!--<div v-for="(d,index) in counter" :key="index" style="padding-left: 190px" class="form-inline">-->
            <!--<div v-for="(d,index) in counter" :key="index" style="padding-left: 190px" class="form-inline">-->
                <!--此处生成党员表单-->
                <!--将外部组件放到vue范围内-->
                <member-info v-for="(item,index) in counter" :key="index" :content="item" :index="index" @delete="btn_delete"></member-info>
</div>
<div style="padding-left: 270px;padding-top: 20px">
                <input v-on:click="btn_add" id="btn_add" class="btn btn-info" type="button" value="添加一个党员信息">
</div>

<!--外部定义组件，外部定义的组件不能写在vue范围内-->
<template id="tmp">
    <div><!--组件内有多个标签必须有一个父div包起来-->
        <div class="form-group">
            <span style="color: red">*</span>姓名：           <label class="sr-only" for="exampleInputEmail3"></label>
            <input type="email" class="form-control" id="exampleInputEmail3">
        </div>        
        <div class="form-group">
            <span style="color: red">*</span>性别：<label class="sr-only" for="exampleInputPassword3"></label>
            <input type="password" class="form-control">
        </div>        
        <div class="form-group">
            <span style="color: red">*</span>出生年月：<label class="sr-only" for="exampleInputPassword3"></label>
            <input type="password" class="form-control">
        </div>        
        <div class="form-group">
            <span style="color: red">*</span>所属党组织：<label class="sr-only" for="exampleInputPassword3"></label>
            <input type="password" class="form-control" id="exampleInputPassword3">
        </div>        
        <input @click="btn_delete" id="btn_delete" type="button" class="btn btn-danger" value="删除">
        <br/><br/>
    </div>
</template>

/*vue组件*/
        Vue.component('member-info', {
            template: '#tmp',
            props:['content',"index"],
            methods: {
                btn_delete:function () {
                    alert(this.index);
                    this.$emit("delete",this.index)
                },
            }//methods END
        });

        var vm = new Vue({
            el:'#vue_div',
            data:{
                counter:[],
            },
            methods:{
                /*添加一个党员信息按钮 被点击,就会插入一个新组件*/
                btn_add:function () {
                    this.counter.push({});
                },
                btn_delete:function (index) {
                    alert("删除");

                    this.counter.splice(index, 1)

                },
            }//methods END
        });//new Vue END

以上的代码是点击id="btn_add"按钮会生成一个组件。然后点击id="btn_delete"按钮会删除当前点击的组件，但是总是会删除最后一个，index下标是正确的。我该如何更改？谢谢！

[面向百度编程cv]

你要删除的是父组件的数组 ，使用 this.$emit("") 调用 member-info 的删除方法 传当前删除的index

[泡泡鱼_]

:key不要绑定下标，你可以在添加方法btn_add中，对push的对象手动加一个index，其值为this.counter.length。然后:key="item.index"即可

[泡泡鱼_]

说话，你MemberInfo中那么多空格字符……，要边距，用margin呀。而且。既然是v-for生成的。肯定不能指定id属性了，否则一大堆一样的id。这个不标准的。 而且你这个MemberInfo把什么都处理完不行吗？直接以props把counter传进去就行了。v-for，删除什么的全在里面弄完 你如果硬是要这样，因为你的结构很简单，也没有太多类似的功能按钮。所以那个删除按钮，个人更喜欢用slot插进去。然后删除事件直接在父组件定义并调用即可。不用emit转发了。毕竟它原本就归属于父组件的一个事件