How to change props in child component created using v-for in VueJs 3

Question

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

<div class="planlist">
    <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.

Answer 1

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
        }
    });
}