1.问题
数据结构:数组-对象-数组-对象
父组件通过v-for渲染子组件,子组件通过v-for渲染孙子组件,孙子组件修改props里传过来的叶子数组元素,
父组件没有更新
期望:父组件更新
解决办法:
v-if 空值组件入口,然后孙子组件通过依赖注入调用父组件方法,父组件通过nexttick修改v-if绑定的值实现更新
相关代码,看不懂的评论区留言哈
<!-- 组件入口 -->
<div class="middle_wrap" v-if="eventlist.length > 0 && array_change">
<div
class="select_wrap"
v-for="(item_1, index_1) in measures"
:key="index_1"
>
<span class="left_num">{{ index_1 }}</span>
<a-input
class="select_title"
placeholder="指标名称"
v-model="item_1.name"
/>
<level_1
:eventlist="eventlist"
:item_1="item_1"
@level_change="level_change($event, index_1)"
@close="level_close(index_1)"
/>
</div>
</div>
父组件修改
test() {
console.log(this.measures);
this.array_change = false
this.$nextTick( ()=>{
this.array_change = true
} )
},
网友评论