I have a parent component creating child components using v-for directive:

<div >
    <ul id="planOl">
    <PlanLego
    v-for="action in store.plan"
        :v-if="action !== activeStep"
        :action_id="action.act_id"
        :actor="action.actor"
        :blocked="action.blocked"
        :key="action.act_id"
        @choose="planClick"
        @fix="changeActor"
    />
    </ul>
</div>

and I'm emitting a signal from the child component:

this.$emit('fix', {
     act_id: this.action_id,
     actor: this.actor
});

My question is:

how can I access and change the properties (for example actor) of this specific child component that emitted the signal? thanks in advance.

CodePudding user response：

As per my understanding, You want to update the actor for the specific child in the parent component based on the act_id passed from child. If Yes, You can achieve this by iterating the original array object in the parent.

In the parent component, Your changeActor method should be like this :

In template :

@fix="changeActor($event)"

In script :

changeActor(emittedObj) {
    store.plan.forEach(item => {
        if (item.act_id === emittedObj.act_id) {
            item.actor = emittedObj.actor
        }
    });
}

CodePudding user response：

Your changeActor method in Parent component should be like this

changeActor({ act_id, actor}){
    .....
}