Vue.js删除子组件数据显示异常，重新销毁创建子组件

参考文档：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;})
}

Vue.js删除子组件数据显示异常，重新销毁创建子组件相关推荐

vue.js 删除指定元素_vue.js删除动态绑定的radio的指定项
上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: " " + "{{option.text}}&q ...
html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
Vue.js仿饿了么外卖App--(2)头部相关的组件的实现
本篇文章主要实现的是App.vue组件.头部组件header.蒙层组件detal和Modal以及路由切换router 文章目录一.App.vue组件 1.重点说明 2.具体实现 (1).整体布局 ( ...
Vue.js学习笔记—input-number:实战：开发一个数字输入框组件
参考<Vue,js>实战(梁灏编著) input-number:实战:开发一个数字输入框组件 git代码 index.html <!DOCTYPE html> <html ...
Vue.js实战——封装长按能量条火箭发射动画组件_17
一.目标按照项目需求,需要完成如下几部分的功能: 1.长按屏幕时,显示能量条动画(类似环形进度条): 2.当能量条充满时,发射小火箭: 二.实现效果三.步骤按照需求分析,上述目标可以拆解成3个功 ...
vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 {{info.title ...
vue js删除数组中指定索引的元素
在前端开发中,我们经常需要对数组进行操作,增删改是经常的事情,那我们js中该如何删除指定的下标元素呢???? 我们用splice来操作 1.定义和用法 splice() 方法用于添加或删除数组中的元素 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...

Vue.js删除子组件数据显示异常，重新销毁创建子组件

Vue.js删除子组件数据显示异常，重新销毁创建子组件相关推荐

最新文章

热门文章