How to enrich event data in Vue.js

Question

I have a Parent.vue, where i send an object to a Child component, and get back the updated item every now and then via this.$emit('updateItem', item).

<template>
  <div>
    <Child
      v-for="(item, index) in items"
      :key="index"
      :item="item"
      @updateItem="updateItem"
      // @updateItem="updateItem(index, dataFromChildComponent)" // this is what i would like to do
    />
  </div>
</template>

<script>
export default {
  name: 'Parent',

  data() {
    return {
      items: [] // List of objects
    }
  },

  methods: {
    updateItem (index, data) {
      // Receive the data and the index
    }
  }
}
</script>

The problem i keep running into is how to locate the object in the list of items in the Parent to update the correct one. I would like to enrich this data to add e.g. an index to be able to locate the item in the list. Is there any way to achieve this or is it actually the correct way to propagate the index down to the Child in order to emit it back up again? Feels like an anti-pattern to me.

kadash · Accepted Answer · 2020-07-15 07:05:15Z

2

You have several options to achieve that:

You can pass as a props index to child component and then in child emit function send object containing updated index with updated value.
You can change your current code to something like this: @updateItem="updateItem(index, $event)" where $event is updated value

answered Jul 15, 2020 at 7:05

kadash

3001 silver badge11 bronze badges

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

1 Comment

whereo Over a year ago

Thanks a lot. I did not know, i still have access to $event in the Parent

akuiper · Accepted Answer · 2020-07-15 07:05:07Z

1

Updating your event listener as @updateItem="data => updateItem(index, data)" should work. Assuming you have emitted data from child component (i.e. something like this.$emit('updateItem', somedata)).

answered Jul 15, 2020 at 7:05

akuiper

216k33 gold badges362 silver badges379 bronze badges

Collectives™ on Stack Overflow

How to enrich event data in Vue.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related