526互联

关于vue在列表展示数据的时候，更改其中一项，列表没有跟着实时变动的问题

发布时间 2023-07-09 16:38:56作者: timseng

背景：

使用低代码自动生成的Vue前端大致页面，然后自定义其中的业务

涉及的页面：

 遇到的问题：

点击添加后，直接变更添加行的状态（输入框不可编辑、状态变为已激活）

涉及代码：

    addRecordAndApply(index) {
      let thatthis = this;
      let indexData = this.dataList[index];
      indexData.enterpris = queryModel.enterpris
      // indexData.id = '111111'

      //1更新完数据后，页面未渲染
      //  this.dataList.splice(index, 1,indexData)

       //2更新完数据后，页面未渲染
      // this.$set(this.dataList,index,indexData)

       //3深拷贝 更新完数据后，页面渲染
      // this.$set(this.dataList,index,_.cloneDeep(indexData))
      // // thatthis.$forceUpdate()

      // return;
      dibootApi.post(`${thatthis.baseApi}/`, indexData).then(res => {
        console.log(res)
        if (res.ok) {
          //4新内存数据 更新完数据后，页面渲染
          thatthis.$set(thatthis.dataList,index,res.data)
          thatthis.$message.success('已添加')

        } else {
          thatthis.$message.error(res.msg)
        }

      }).catch((e) => {
        thatthis.$message.error(e.message)
      })


    },

如上所示，在列表中更新数据，如果不是深拷贝或者新建的数据，不会触发Vue的页面渲染