从 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。 由于您已经可以访问索引，只需传递 index 而不是 $event

 @deleteThisQuote="deleteQuote(index)"

该方法如下所示：

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