javascript - 从VueJS组件之间的数组中拼接出this.index

Question

我的父模板中有一个引号数组，我将其作为 Prop 传递给子组件。然后，我获取该数组，并通过将其通过 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);
   }
 }

您正在传递“event”，然后尝试拼接 this.event。 由于您已经有权访问索引，因此只需传递索引而不是 $event

 @deleteThisQuote="deleteQuote(index)"

该方法如下所示:

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