Vue.js动态绑定的Style样式变化后DOM未更新 | 您所在的位置:网站首页 › vue中使用dom的class样式 › Vue.js动态绑定的Style样式变化后DOM未更新 |
今天进行前端基础组件开发过程中遇到一个坑,找了一个下午的原因没能解决,去请教了公司的大神,终于明白这个问题是怎么来的了。在博客中记录一下,免得以后忘了又得浪费时间~ 一、问题描述: 在一个标签中动态绑定了style样式,如,在后续操作中将item.labelStyle数据做了更新后发现DOM始终没有更新,难道是Vue.js的Bug???后来想想,怎么可能,尤大神怎么可能会将有这么明显Bug的框架放出来给我们用。还是想办法解决问题吧~ 二、原因 在后续的数据操作中,是通过数组索引的方式进行数据更新的,例如:self.displayControl.imageMsg[self.dataList.pageNum].labelStyle = { width: 0, height: 0, "margin-left": 0, "margin-top": 0},其实这样DOM是监听不到绑定数据的变化的,需要将更新数据set一下,告诉DOM我更新数据啦! 三、解决步骤 在通过索引更新数组型数据时可以这样操作: 1、首先将该索引指定的元素赋值给变量,如: let obj = self.displayControl.imageMsg[self.dataList.pageNum];2、更新obj变量数据内容,如: obj.labelStyle = { width: 0, height: 0, "margin-left": 0, "margin-top": 0 };3、将数据set一下,即告诉DOM我更新数据啦,如: self.$set(self.displayControl.imageMsg, self.dataList.pageNum, obj);数组型数据set时传入参数规则为: set(array: T[], key: number, value: T): T; 即set(数组, 索引, 更新的数据)问题完美解决,开开心心下班~ |
CopyRight 2018-2019 实验室设备网 版权所有 |