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);
   }
 }

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

 @deleteThisQuote="deleteQuote(index)"

该方法如下所示:

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