【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="https://bbs.csdn.net/topics/添加一個黨員資訊">

</div>

<!--外部定義組件，外部定義的組件不能寫在vue范圍內-->

<template id="tmp">

    <div><!--組件內有多個標簽必須有一個父div包起來-->

        <div class="form-group">

            <span style="color: red">*</span>姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="sr-only" for="exampleInputEmail3"></label>

            <input type="email" class="form-control" id="exampleInputEmail3">

        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <div class="form-group">

            <span style="color: red">*</span>性別：<label class="sr-only" for="exampleInputPassword3"></label>

            <input type="password" class="form-control">

        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <div class="form-group">

            <span style="color: red">*</span>出生年月：<label class="sr-only" for="exampleInputPassword3"></label>

            <input type="password" class="form-control">

        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input @click="btn_delete" id="btn_delete" type="button" class="btn btn-danger" value="https://bbs.csdn.net/topics/洗掉">

        <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

標籤：JavaScript

上一篇：求一份基于nodejs與mongodb博客系統畢設論文

下一篇：react 新版本 生命周期 鉤子函式