vue父组件数据更新子组件相关内容未改变问题(用watch解决) vue父组件数据更新子组件相关

父组件数据更新子组件相关内容未改变父组件
【vue父组件数据更新子组件相关内容未改变问题(用watch解决)】在父组件中，根据后台给的数据（数组），v-for生成子组件

子组件（existProject）

因为有多条数据，所以有分页处理，在第一页中数据显示正常，但是在获得第二页数据并赋值给父组件的data后，子组件的信息保留的还是第一页的信息
解决方法,使用watch深度监听

watch:{itemprop:{handler(n,o){ console.log(this.itemprop); var status = this.itemprop.status; var showCondition = this.itemprop.showCondition; // debugger; this.status_tit = (function(status,showCondition) {if(status==0) {return '未发布'; }if(status==2 && showCondition==1){// 已发布return'收集中'; }if(status==2 &&showCondition==0){// 暂停return '已暂停'; }if(status==2 &&showCondition==-1) {// 终止return '已终止'; }if(status==2 &&showCondition==2) {// 问卷发布结束return '已结束'; }})(status,showCondition)},deep:true,immediate:true,}}

watch可以监听子组件的数据变化，数组或者对象要用深度监听，字符串什么的不用深度监听，这样就可以在分页切换数据后，就不会保留原有的信息，而是新的信息了
循环中子组件不更新问题解决方法
这是Element-UI的一个bug，解决方案是从el-table中增加一个row-key属性，并为row-key设置一个能唯一标识的字段名。
1.这个可以是数据库的id字段

2.给table增加一个随机数的key

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。