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

Posted 2023-02-16

技术标签:

【中文标题】vue v-for 在循环中重新渲染一个循环【英文标题】：vue v-for rerender a loop in a loop 【发布时间】：2021-05-15 13:18:42 【问题描述】：

我的 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"
          />

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

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

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

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

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

【问题讨论】：

您应该添加更多代码。文字描述不够…… 我正在制作一个密码箱 key 属性是重新渲染组件的触发器。生成满足您要求的密钥。 【参考方案1】：

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

Example application

【讨论】：

【参考方案2】：

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