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
});
how can I access and change the properties (for example actor
) of this specific child component that emitted the signal? thanks in advance.
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
}
});
}