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.

As you have updated values of `act_id` and `actor` in the child itself then why do you want to emit and pass it again from parent ? — Debug Diva, Nov 15 '22 at 05:50
@RohìtJíndal According to this [answer](https://stackoverflow.com/a/43701284) changing the property value from inside the component will generate a warning, and instead, they suggested emitting a signal. — Bilal, Nov 15 '22 at 07:03
I added an answer. Hope it will work as per your requirement. — Debug Diva, Nov 15 '22 at 08:18

score 1 · Accepted Answer · answered Nov 15 '22 at 08:17

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

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

My question is:

1 Answers1