Vue.js动态绑定的Style样式变化后DOM未更新 您所在的位置:网站首页 vue中使用dom的class样式 Vue.js动态绑定的Style样式变化后DOM未更新

Vue.js动态绑定的Style样式变化后DOM未更新

2023-09-10 03:06| 来源: 网络整理| 查看: 265

       今天进行前端基础组件开发过程中遇到一个坑,找了一个下午的原因没能解决,去请教了公司的大神,终于明白这个问题是怎么来的了。在博客中记录一下,免得以后忘了又得浪费时间~

       一、问题描述:

       在一个标签中动态绑定了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 实验室设备网 版权所有