Javascript vue.js-v-for中动态生成的组件未正确更新绑定属性

我在vue.js中遇到了一个问题，我不确定该如何解决它。我会尽量简明扼要地解释它的要点

处境 我从RESTAPI加载数据。我使用javascript原型语法创建了一个名为

DataLoader

的类，该类处理所有加载和内部状态更改。加载的数据通常以重复的方式显示（例如列表或卡片）。为此，我创建了一个名为

dataloaderRapper

的新组件，将

DataLoader

对象作为属性。

dataloaderRapper

根据

DataLoader

对象的加载状态显示加载微调器。此外，组件标记还包括以下标记：

<slot :dataLoader='dataLoader' />

此外，每个版本都由一个或多个艺术家出版。艺术家列表需要单独加载。我可以这样扩展示例：

<DataLoaderWrapper :dataLoader="myReleaseLoader">
...
</DataLoaderWrapper>

<DataLoaderWrapper :dataLoader="myReleaseLoader">
  <template slot-scope="props">
    <template v-for="release in props.dataLoader.data">
      <h1>release.Title</h1>
      Artists: 
      <DataLoaderWrapper :dataLoader="getArtistsLoader(release)">
        <template slot-scope="nestedProps">
          {{nestedProps.dataLoader.data.map(artist => artist.Name).join(', ')}}
        </template>
      </DataLoaderWrapper>
    </template>
  </template>
</DataLoaderWrapper>

发布。标题
艺术家：
{{nestedProps.dataLoader.data.map（artist=>artist.Name.join（'，'）}

---

问题 版本已正确加载，

myReleaseLoader

的模板已正确呈现。一旦发生这种情况，就会动态创建一个新的

DataLoader

实例，并命令加载给定版本的艺术家。每次发布都会发生这种情况。艺术家加载程序加载时，将显示加载微调器。问题是，

nestedProps

变量不会在

DataLoader

实例加载完数据后立即更新

我已经尝试解决这个问题至少两天了，这意味着我已经调试并检查了我想到的所有东西

我确信数据已正确加载并存在。但是

dataloaderRapper

组件的加载微调器仍会显示，并打印

nestedProps。dataLoader

显示

数据：[]

，与检查组件时显示的状态不一致。这使我得出结论，

nestedProps

属性没有正确更新

我认为这可能是因为vue绑定是单向的，并且子组件中的更新不会触发父组件更新

在启用“热重新加载”的情况下将页面加载到本地计算机上，每次我保存文件中的更改时都会对UI执行更新，而不会执行页面的完全重新加载。现在更新UI时，加载程序的状态与第一次加载页面时不同。数据不会再次加载，因为

getArtistsLoader（..）

函数实现了一个缓存，该缓存保证在请求时始终为给定版本返回相同的加载程序，这意味着在重新呈现页面时数据基本上已经存在，从而显示所需的输出。否则我无法进入正确的状态

我尝试使用计算属性，直接访问加载程序，以及更直接地访问所需属性（例如，

props.data

，而不是

props.dataLoader.data

），但都没有解决更新问题

---

如何执行此操作？

问题是getArtistsLoader不同步返回数据

因此，在

DataLoaderRapper

中，dataLoader道具未定义

解决方案 DataLoaderRapper可以接受一个

承诺

作为数据，因此它可以在承诺解析时更新

1.更新DataLoaderRapper以接受承诺 我使用

async

prop来区分数据加载程序是否异步

<template>
  <div>
    <slot :dataLoader="realData"/>
  </div>
</template>

<script>
export default {
  props: {
    dataLoader: null,
    async: Boolean
  },
  data() {
    let realData = this.dataLoader;
    if (this.async) {
      realData = [];
      this.dataLoader
        .then(data => {
          this.realData = data;
        })
        .catch(error => {
          console.log(error);
        });
    }
    return {
      realData: realData
    };
  }
};
</script>

3.添加

async

prop

完整演示

---

非常感谢您的努力，先生！你不知道这花了我多少时间。。。

const data = getArtistsLoader(release);
// data === undefined

<template>
  <div>
    <slot :dataLoader="realData"/>
  </div>
</template>

<script>
export default {
  props: {
    dataLoader: null,
    async: Boolean
  },
  data() {
    let realData = this.dataLoader;
    if (this.async) {
      realData = [];
      this.dataLoader
        .then(data => {
          this.realData = data;
        })
        .catch(error => {
          console.log(error);
        });
    }
    return {
      realData: realData
    };
  }
};
</script>

function getArtistsLoader(release) {
  retrun axios.get('/artists?release=' + release.id)
    .then((response) => response.data)
}

<DataLoaderWrapper async :dataLoader="getArtistsLoader(release)">