vue v-for 在循环中重新渲染一个循环

问题描述

我的 v-for 出现重新渲染问题。将此组件作为父组件

<category
          v-for="category in categories"
          :key="category.id"
          ref="category"
          :category-data="category"
          :audits-data.sync="audits"
          @delete-category="deleteCategory"
          @update-audits="catched"
/>

还有下面这个小时候

<audit
            v-for="audit in audits"
            :key="audit.id"
            ref="audit"
            :audit-data="audit"
            @delete-audit="deleteAudit"
          />

问题是，我使用 props 将数据从父级传递给子级，在这种情况下，category-data 有一个对象，它是下一步 audit 循环的数据

如何删除审计中的一个元素并强制类别键重新渲染自己（类别）和子项（审计），只需在 v-for 中传递道具。

我正在使用从 audits 触发的发射来触发 getCategories() 组件内的 category 函数。

问题是，当我删除审核时，审核不会响应并重新加载，因为类别仍然相同，因此它不会为审核启动重新渲染链。

即使没有更改类别但仅更新 category，我如何强制重新渲染 v-for audits。

解决方法

我会在子作用域发出删除事件并在父作用域处理相同的事件，从而允许更新主列表。要使数组反映其更改的状态，请重新分配其值（尝试映射 -> 过滤器）或将其拼接后进行一些转换。根据我从你的问题陈述中可以推断出的，这就是我想提出的建议。我为此制作了一个小应用程序。随意 fork 并希望它有所帮助。

Example application

如@ssc-hrep3 所述，更新键属性将触发底层组件的重新渲染。但是，您的问题似乎与反应性检测问题有关，因此您不应通过强制重新渲染来解决它。由于您似乎使用了嵌套对象和/或数组，因此您的反应性问题可能与 Vue change detection caveats 相关。

然后你应该尝试这样的事情： Vue.set(this.categories,index,updatedAudits)

我对这种复杂的数据嵌套用例的建议是首先简化您的模型（例如，在尝试完整的真实案例之前设置 category.audits="test string"），检查它是否正确响应，然后添加一个级别一次复杂度

v-for vue-reactivity vue.js