vue.jsvue-componentvuejs3publish-subscribevue-events

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


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.


Solution

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