vue改变多维数组数据改变但是无法渲染

最新推荐文章于 2024-03-21 09:37:08 发布

原创最新推荐文章于 2024-03-21 09:37:08 发布 · 618 阅读

CC 4.0 BY-SA版权

本文探讨了在Vue中遇到的一个问题：当尝试改变多维数组时，虽然数据已经更新，但视图并未随之渲染。文章通过一个实例展示了如何在点击事件中正确操作二维数组，并指出仅使用数据改变的方法不足以触发Vue的DOM更新，需要结合v-if等Vue指令来实现视图的正确刷新。

要完成这个效果

首先有数据

const isOpcial = [
  [].fill(false, 0, 4),
  [].fill(false, 0, 4),
  [].fill(false, 0, 4),
  [].fill(false, 0, 4),
]

作为一个数据盒子；

然后点击，各取反二维数组盒子里的数据，以下为事件，如果只是采用以下方法，页面是不能渲染的

if (title === "Y4道路") {
        switch (value) {
          case "未采集":
            this.legendStatus.notCollY4 = !this.legendStatus.notCollY4;
            this.isOpcial[3][1] = !this.isOpcial[3][1];
            console.log(this.isOpcial[3][1])
            break;
          case "未下发":
            this.legendStatus.notIssuedY4 = !this.legendStatus.notIssuedY4;
            this.isOpcial[3][0] = !this.isOpcial[3][0];
            break;
          case "已采集":
            this.legendStatus.inCollectY4 = !this.legendStatus.inCollectY4;
            this.isOpcial[3][3] = !this.isOpcial[3][3];
            break;
          case "采集中":
            this.legendStatus.alreadyCollY4 = !this.legendStatus.alreadyCollY4;
            this.isOpcial[3][2] = !this.isOpcial[3][2];
            break;
}

需要配合以下方法 dom里的v-if

<template v-if="legendStatus.notCollY4 && legendStatus.notIssuedY4 && legendStatus.inCollectY4 && legendStatus.alreadyCollY4 ">

</template>

vue改变多维数组 数据改变但是无法渲染

vue改变多维数组数据改变但是无法渲染