在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

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

您正在传递“事件”，然后试图拼接this.event。 既然你已经访问索引，只是通过索引而不是$事件

@deleteThisQuote="deleteQuote(index)" 

的方法，看起来像下面这样：

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