I have implemented a system using three single-file-components.
ParentVariation.vueVariationInfo.vueChildvariation.vue
In this setup, the variation-info child component emits a MarkedFilled event which is then caught by the ParentVariation component. Here's a snippet from the ParentVariation.vue file:
<template>
// Content of ParentVariation.vue
</template>
<script>
export default {
// Script content
}
</script>
In the main Vue instance, I have set up the initial data as follows:
data: function() {
return {
parents: [{ id:0, child: [], filled:'' }]
}
},
The initialization of ParentVariation looks like this:
<parent-variation v-for="parent in parents" :row="parent" :key="parent.id"></parent-variation>
The goal here is to ensure that when the MarkedFilled event is triggered from the child component (variation-info), the parent component (parent-variation) should update the 'filled' property for the corresponding parent element on the main Vue instance. However, currently, only the first parent element's 'filled' property gets updated each time the event is called. The objective is to modify the property of the clicked element dynamically.
After spending two days on this issue, I am still unable to resolve it. Any assistance or insights would be highly appreciated. My primary aim is to understand why only the first element is getting affected every time this event occurs.