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

Posted 2023-02-22

【中文标题】vue.js - v-for 中动态生成的组件没有正确更新绑定属性

【英文标题】：vue.js - dynamically generated component in v-for does not update bound property correctly

【发布时间】：2018-08-05 02:52:30

【问题描述】：

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

情况

我从一个 REST API 加载数据。我使用 javascript 原型语法创建了一个类，以创建一个名为 DataLoader 的类，它处理所有加载和内部状态更改。通常，加载的数据以重复的方式显示（例如列表或卡片）。为此，我创建了一个名为DataLoaderWrapper 的新组件，将DataLoader 对象作为属性。 DataLoaderWrapper 根据DataLoader 对象的加载状态显示加载微调器。此外，组件标记包括以下标记：

<slot :dataLoader='dataLoader' />

.. 允许轻松访问加载的数据。我们的想法是像这样使用组件：

<DataLoaderWrapper :dataLoader="myDataLoader">
  <template slot-scope="props">
    <template v-for="item in props.dataLoader.data">
       item
    </template>
  </template>
</DataLoaderWrapper>

现在只是要立即解决这个问题；为什么我在模板中使用props.dataLoader 而不是myDataLoader？基本思想是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>

---

问题

版本已正确加载，myReleaseLoader 的模板已正确呈现。一旦发生这种情况，就会动态创建一个新的DataLoader 实例并命令加载给定版本的艺术家。每个版本都会发生这种情况。在加载艺术家加载程序时，会显示加载微调器。问题是，nestedProps 变量不会在 DataLoader 实例加载完数据后立即更新。

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

我确定数据已正确加载且存在。但是DataLoaderWrapper 组件的加载微调器仍然显示，打印nestedProps.dataLoader 显示data: [] 与检查组件时显示的状态不符。这让我得出结论，nestedProps 属性没有正确更新。

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

每次我在我的文件中保存更改而不执行页面的完全重新加载时，将页面加载到我的本地计算机上并启用“热重新加载”会更新 UI。现在更新 UI 时加载器的状态与第一次加载页面时不同。数据不会再次加载，因为getArtistsLoader(..) 函数实现了一个缓存，该缓存保证在请求时为给定版本返回始终相同的加载器，这意味着在重新渲染页面时数据基本上已经存在，导致在显示的所需输出中。否则我无法进入正确的状态。

我尝试使用计算属性、直接访问加载器以及更直接地访问所需属性（例如 props.data 而不是 props.dataLoader.data），但这些都没有解决更新问题。

我该怎么做？

【参考方案1】：

问题是 getArtistsLoader 没有同步返回数据

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

所以在 DataLoaderWrapper 内部，dataLoader 道具的定义是不确定的

解决方案

DataLoaderWrapper 可以接受 promise 作为数据，因此它可以在 promise 解决时更新。

1。更新 DataLoaderWrapper 以接受承诺

我使用async 属性来区分dataLoader 是否异步

<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>

2。让 getArtistsLoader 返回承诺

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

3。添加async道具

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

完整演示

【讨论】：

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