method 1:
in the parent component of a recursive component:
<plan-preview :sectionList="sectionList"></plan-preview>Recursive component:
<plan-section-list v-if="section.children" :sectionList="section.children"></plan-section-list> name: "planSectionList",
props: {
sectionList: Array
},
mounted() {
_.forEach(this.sectionList, async section => {
const res = await this.$api.plan.getSectionDetails(section.id);
this.$set(section, "details", res.data.data);
});
}method 2:
in the parent component of a recursive component:
<plan-preview :sectionList.sync="sectionList"></plan-preview>Recursive component:
<plan-section-list v-if="section.children" :sectionList.sync="section.children"></plan-section-list> name: "planSectionList",
props: {
sectionList: Array
},
mounted() {
_.forEach(this.sectionList, async section => {
const res = await this.$api.plan.getSectionDetails(section.id);
this.$set(section, "details", res.data.data);
});
this.$emit("update:sectionList", this.sectionList);
}both ways update the data, but the view is not updated. Why?
Update:
suddenly discovered the factors that caused the view not to be updated. The following is the recursive component code:
<template>
<ul class="plan-preview__section-list">
<li v-for="section in sectionList" :key="section.id">
<div class="plan-preview__section" @click="section.show = !section.show">
<h4 class="plan-preview-section__title">{{section.title}}</h4>
<div v-show="section.show" class="plan-preview-section__body">
<p class="plan-preview-section__content">{{section.content}}
:{{section.details}}
</div>
</div>
<plan-section-list v-if="section.children" :sectionList.sync="section.children"></plan-section-list>
</li>
</ul>
</template> where section.details is used to test whether the view is updated. Its parent element vshow = "section.show" is a big hole, and it"s perfectly normal to delete it. Why is that?