Vue.js删除子组件数据显示异常,重新销毁创建子组件
一、问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常。二、问题原因:出现异常的数据不是响应式依赖,是从vuex读取的。通过测试发现,父组件删除数据,没有重新创建子组件,怀疑是子组件异常的数据是读取的缓存副本。三、问题解决:根据v-if改变dom结构的特性,手动使子组件重新创建。1.设置一个数据变量isrefresh=true2.初始v-if=isrefresh3.删除时,配合$ne
·
参考文档:https://blog.csdn.net/iceking66/article/details/78201885(回调)
https://segmentfault.com/q/1010000004000163(v-if)
一、问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常。
<section v-if="isrefresh" v-for="(sign,index) in signs">
<sign-card></sign-card>
</section>
二、问题原因:出现异常的数据不是响应式依赖,是从vuex读取的。通过测试发现,父组件删除数据,没有重新创建子组件,怀疑是子组件异常的数据是读取的缓存副本。
三、问题解决:根据v-if改变dom结构的特性,手动使子组件重新创建。
1.设置一个数据变量isrefresh=true
2.初始v-if=isrefresh
3.删除时,配合$nextTick()DOM渲染回调函数,使子组件重新创建
{
this.isrefresh = this.isrefresh?false:true;
this.$nextTick(function(){//DOM变化回调函数:v-for渲染已完成
this.isrefresh = this.isrefresh?false:true;
})
}
更多推荐
已为社区贡献3条内容
所有评论(0)