我的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)