Splice out this.index from array between components in VueJS

Question

I have an array of quotes in my parent template which I pass to a child component as a prop. I then take that array and create another child component for each index in the array by passing it through a for loop into a slot. This all seems to work fine.

The problem is that I am trying to delete each index of the array on clicking it's element, but whenever I click an element the first index is deleted, not the index linked to the element clicked.

In the following component I execute method @click and run the method deleteQuote passing the related index.

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

Since this component doesn't have direct access to my array, I emit a custom event that is listened for in its parent. This triggers another method which splices my array at this.index. Following is the parent component...

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

This does everything I want, except it splices out the wrong index in the array. No matter which element I click, myArray[0] is removed. What is going on here? Am i missing something elementary?

this.event is not in the array. You set it up to use the event psrsmeter, not this.event - you would the use +event.target.getAttribute('index') — roberto tomás
– roberto tomás, Commented Jul 29, 2017 at 11:28

Ahmad · Accepted Answer · 2017-07-29 11:39:00Z

2

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

You are passing "event" and then trying to splice this.event. Since you already have access to the index, just pass index instead of $event

 @deleteThisQuote="deleteQuote(index)"

The method would look like the following:

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

edited Jul 29, 2017 at 11:39

answered Jul 29, 2017 at 11:28

Ahmad

1,88113 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DMrFrost Over a year ago

I plugged in your method and I am now getting the behavior that it deletes the last index in the array each click. Any idea why? (have an upvote)

Ahmad Over a year ago

Just seen another thing in your code, I will edit my answer.

Collectives™ on Stack Overflow

Splice out this.index from array between components in VueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related