Resolved: How to change status of one component inside v-for without affecting other component

Question:

I have a childComponent which is rendered dynamically via v-for inside of the parentComponent. Inside the Parent component I have some logic that fetches data from the database and displays it on the screen. The fetch request query is bases on the child component selected (clicked on). Once the user has clicked on a component I would like to show the user that the data is loading by changing text inside the child component to loading. The issue I’m facing is that when the request has been sent, all children components generated by v-for change status to “Loading…”. I would only like the once that has been clicked to change.
Edit: Added CodeSandbox
I created a simple representation of my problem.
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>

Answer:

try to pass index as loading prop instead of boolean:

Vue.component('childComponent', {
  template: `
    <div>
      <p v-if="loading === data">LOADING...</p>
      <p v-else @click="triggerMethod">Click Me</p>
    </div> 
  `,
  props: {
    data: {
      type: Number,
    },
    loading: {
      type: Number,
      default: null,
    },
  },
  methods: {
    triggerMethod() {
      const customURL = `getDataURL/data=${this.data}`;
      this.$emit("click-from-child", customURL);
    },
  },
})
new Vue({
  el: "#demo",
  data() {
    return {
      loading: null,
      returnedData: "",
    };
  },
  methods: {
    clickedEvent(componentData) {
      this.loading = componentData;
      this.returnedData = "";
      console.log(`Request Sent to: ${componentData}`);
      setTimeout(() => {
        console.log("Request Completed - Success");
        this.returnedData = `Some Data returned from: ${componentData}`;
        this.loading = null;
      }, 3000);
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <child-component
      v-for="(element, index) in 3"
      :key="index"
      :data="index"
      :loading="loading"
      @click-from-child="clickedEvent(index)"
   ></child-component>
   <p>{{ returnedData }}</p>
</div>

If you have better answer, please add a comment about this, thank you!

Resolved: How to change status of one component inside v-for without affecting other component

Resolved: Reshape tensors of unknown shape with tf.function

Resolved: Use Svelte Component as Slot

Resolved: Vaadin 14.9 – Redirect on Session Destroy Event

Leave A Reply