vue 修改数组属性，页面不重新渲染

｀l l l s j 。

于 2021-09-29 14:09:21 发布

阅读量459

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html

本文链接：https://blog.csdn.net/qq_37167049/article/details/120547425

vue 专栏收录该内容

41 篇文章

订阅专栏

博客探讨了在React中遇到的一个问题：改变数组对象属性后，页面未重新渲染。作者通过创建新的数组并赋值来实现视图更新，解决了这个问题。主要涉及React的状态管理和DOM更新机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这样一个数组，要做的是，点击div 变色，在点击取消，尝试之后发现，当改变isChoose属性，
isChoose值改变，但是页面不会重新渲染。效果如下
在这里插入图片描述

在这里插入图片描述
解决方案如下：
思路：
既然深度渲染不行，那就用一个新数组重新赋值就ok了

chooseDashboard(item) {
      let tmp = [];
      this.groupDashboardList.forEach(group => {
        group.children.forEach((child, index) => {
          if (item.id === child.id) {
            child.isChoose = !child.isChoose;
          }
        });
        tmp.push(group);
      });
      this.groupDashboardList = [...tmp];
    },
 .dashboard-active {
  background-color: red;
}