[Vuejs]-How do I use $emit in the loop to pass the array value to the parent?

by

1👍

✅

Your code should work fine, I did not see any issue in your code. I am assuming you are capturing the event emitted from the child into the parent component like this.

<child @update="update"></child>

Working Demo :

Vue.component('child', {
  data() {
    return {
      arr: [{a:'1',b:'2'}, {a:'3',b:'4'}, {a:'5',b:'6'},{a:'1',b:'2'}]
    }
  },
  mounted() {
    for(let index in this.arr){
      this.$emit('update', this.arr[index])
    }
  }
});

var app = new Vue({
  el: '#app',
  methods: {
    update(product) {
        console.log(product);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<div id="app">
  <child @update="update"></child>
</div>

Suggestion : To improve the performance, Instead of emitting each element into parent component, My suggestion would be to pass whole array and then do the data manipulations in the parent component itself.

👤Debug Diva

Leave a comment