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

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

1 个答案: