vue视图数据不更新问题

vue表格操作按钮点击选择切换状态时,再次点击该按钮取消选择

结果出现数据状态已经改变,但是表格上的按钮并未改变

解决方法:

this.$set:

当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了

案例:

1.在<template></template>标签的代码

2.方法中的代码

点击触发方法的时候:

调用方法this.$set(target,key,value)

target:要更改的数据源(可以是对象或者数组)

 key:要更改的具体数据

 value :重新赋的值

一开始先添加的这个this.$set( tableRow, ‘btnStatus’, true)【意思是更新视图上表格中该行的数据】然后发现并不起作用

在这个基础上加上了 this.$set(this.tableTicket,scope.$index,scope.row)【意思是该表格中的哪行对象的内容】,让他针对性更加准确

但是还是不起作用

最后加上this.$forceUpdate()【强制刷新】这个是由于数据层次太多,需手动强制刷新

完美!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容