Tengo un childComponent que se representa dinámicamente a través v-for dentro de parentComponent . Dentro del componente principal, tengo cierta lógica que obtiene datos de la base de datos y los muestra en la pantalla. La consulta de solicitud de recuperación se basa en el componente secundario seleccionado (se hizo clic en él). Una vez que el usuario haya hecho clic en un componente, me gustaría mostrarle que los datos se están cargando cambiando el texto dentro del componente secundario a loading . El problema al que me enfrento es que cuando se envía la solicitud, todos los componentes secundarios generados por v-for cambian de estado a "Cargando...". Solo me gustaría cambiar la vez que se ha hecho clic.

Editar: CodeSandbox agregado

Creé una representación simple de mi problema.

parentComponent.vue

 <template> <div> <childComponent v-for="(element, index) in 3" :key="index" :data="index" :loading="loading" @click-from-child="clickedEvent" /> <p>{{ returnedData }}</p> </div> </template> <script> import childComponent from "./childComponent"; export default { components: { childComponent }, data() { return { loading: false, returnedData: "", }; }, methods: { clickedEvent(componentData) { this.loading = true; this.returnedData = ""; console.log(`Request Sent to: ${componentData}`); setTimeout(() => { console.log("Request Completed - Success"); this.returnedData = `Some Data returned from: ${componentData}`; this.loading = false; }, 3000); }, }, }; </script>

childComponent.vue

 <template> <p v-if="loading">LOADING...</p> <p v-else @click="triggerMethod">Click Me</p> </template> <script> export default { props: { data: { type: Number, }, loading: { type: Boolean, default: false, }, }, methods: { triggerMethod() { const customURL = `getDataURL/data=${this.data}`; this.$emit("click-from-child", customURL); }, }, }; </script>