如何在不影响其他组件的情况下更改V-For内部一个组件的状态

Question

我有一个childComponent，该通过parentcomponent的内部通过v-for动态渲染。在父组件内部，我有一些逻辑，可以从数据库中获取数据并在屏幕上显示。获取请求查询是所选子组件的基础（单击）。用户单击一个组件后，我想向用户展示数据正在加载数据通过将子组件内的文本更改为loading。我面临的问题是，在发送请求时，所有由v-for将状态更改为“加载...”的子女组件。我只想单击一次更改的一次。

编辑：

”创建了我问题的简单表示。

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 1

尝试将索引作为加载 prop而不是布尔值：

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>