解决Vue多维数组修改某一值后页面不渲染的问题

解决Vue多维数组修改某一值后页面不渲染的问题

问题如下：

this.data为vue的data中的数据，它是一个数组，数组里面是对象，数组中有一个selected属性，当在初次渲染完毕后，修改selected的值时，DOM并没有再次渲染。

使用了this.$set()登方法，但是不是很好。

        // 判断是否是编辑模式，否则直接打开图书开始阅读
        if (this.isEditMode) {
          this.data.forEach((item) => {
            if (item.fileName === book.fileName) {
              item.selected = !item.selected
            }
          })
          // 强制刷新DOM，解决vue修改对象属性不渲染DOM
          this.$forceUpdate()
          const selectedList = this.data.filter((item) => {
            return item.selected === true
          })
          this.setShelfSelectedList(selectedList)
        } else {
          console.log("打开图书，开始阅读")
        }
      }

 解决办法：

在修改完数据之后，使用  this.$forceUpdate() 强制渲染DOM。