VueJSのコンポーネント間の配列からthis.indexをスプライス

Question

私は子コンポーネントに小道具として渡す私の親テンプレートに引用符の配列を持っています。私はその配列をとり、forループを通ってスロットに渡すことで、配列内の各インデックスの別の子コンポーネントを作成します。これはすべてうまくいくようです。

問題は、配列をクリックして各インデックスを削除しようとしていますが、要素をクリックするたびに、クリックされた要素にリンクされたインデックスではなく最初のインデックスが削除されます。

次のコンポーネントでは、@clickメソッドを実行し、関連インデックスを渡すメソッドdeleteQuoteを実行します。

<template> 
    <div class="panel-body" @click="deleteQuote"> 
    <slot></slot> 
    </div> 
</template> 

<script type="text/javascript"> 
    export default{ 
    methods: { 
     deleteQuote() { 
      this.$emit('deleteThisQuote', this.index) 
     } 
    }, 
    props: ['index'] 
    } 
</script> 

このコンポーネントは自分のアレイに直接アクセスできないため、親イベントで聴取されるカスタムイベントを送出します。これは、私の配列をthis.indexにスプライスする別のメソッドをトリガします。以下は親コンポーネントです...

<template> 
    <div> 
    <quote-singles 
     class="col-sm-3 panel panel-default" 
     v-for="(quote, index) in quotes" 
     :index="index" 
     @deleteThisQuote="deleteQuote($event)"><h3>{{index}}{{quote}}</h3> 
    </quote-singles> 
    </div> 
</template> 

<script type="text/javascript"> 
    import quoteSingles from './quoteSingles.vue' 

    export default{ 
    methods: { 
     deleteQuote(event) { 
      this.quotes.splice(this.event, 1); 
     } 
    }, 
    props: ['quotes'], 
    components: { 
     'quoteSingles': quoteSingles 
    } 
    } 
</script> 

これは、配列の間違ったインデックスをスプライスする点を除いて、これはすべて行います。どの要素をクリックしても、myArray [0]は削除されます。ここで何が起こっているのですか？私は何か初心者が欠けていますか？

Answer 1

"event"を渡してからthis.eventをスプライスしようとしています。 すでにだけではなく、$イベント

@deleteThisQuote="deleteQuote(index)" 

のインデックスを渡し、インデックスへのアクセス権を持っているので、この方法は、以下のようになります。

methods: { 
    deleteQuote(index) { 
    this.quotes.splice(index, 1) 
    } 
}