Vue2 call parent method from child in looped component

问题

I'm looping root component, which have with child component.

<root-select v-for="offer in offers"  >
   <child-options v-for="item in options" >
   </child-options>
</root-select>

But, when I $emit root function from child, all my roots component changed those data.

child:

EventBus.$emit('toggle', value);

root:

EventBus.$on('toggle', this.toggle);

But I need, that data changes only in triggered component.

Thanks.

回答1:

Try not to use Event bus to emit. Use normal Emit way to emit from child to parent.

In child component function:

this.$emit('toggle', value);

In parent component function:

<template><child-options v-for="item in options" @toggle="onToggleFn"></child-options></template>

<script>
...
methods:{
     onToggleFn:function(){
         //your logic here
     }
}
</script>

来源：https://stackoverflow.com/questions/51382072/vue2-call-parent-method-from-child-in-looped-component