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有一个Object,它是下一步audit循环的数据

如何删除审计中的一个元素,并通过在v-for中传递props来强制类别键重新渲染自己(类别)和子(审计)。

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

问题是,当我删除审计时,审计不会响应并重新加载,因为类别仍然相同,所以它不会启动审计的重新呈现链。

如何强制重新渲染v-forcategory,即使没有更改类别,但只有audits更新。

我将在子范围发出一个删除事件,并在父范围处理相同的事件,从而允许主列表得到更新。要使数组反映其改变的状态,可以重新赋值(尝试map ->过滤器)或拼接后的一些转换。根据我从你的问题陈述中推断出来的,这就是我想提出的建议。我做了一个同样的小应用程序。请随意分叉,希望它能有所帮助。

示例应用程序

如@ssc-hrep3所述,更新键属性将触发底层组件的重新呈现。然而,你的问题似乎与反应性检测问题有关,所以你不应该通过强制重新渲染来解决它。当你似乎使用嵌套对象和/或数组时,你的反应性问题可能与Vue更改检测警告有关。

你应该尝试这样做:Vue.set(this.categories, index, updatedAudits)

对于这种复杂的数据嵌套用例,我的建议是首先简化你的模型(例如set category. auditing ="test string"在尝试完整的实际情况之前,检查它是否正确响应,然后每次添加一个级别的复杂性

最新更新