vue数据更新视图不更新及$set无法获取最新数据

最新推荐文章于 2023-12-15 13:30:00 发布

原创最新推荐文章于 2023-12-15 13:30:00 发布 · 499 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

40 篇文章

订阅专栏

本文讲述了在Vue.js应用中，两个联动的下拉框（订单平台与订单店铺）在数据更新时遇到的问题。当从接口动态获取数据并使用`$set`更新店铺列表时，如果新数据条数少于旧数据，会导致视图显示异常。为解决此问题，提出了先使用`$delete`移除原有数据再用`$set`添加新数据的方法，确保视图正确更新。然而，这种方法在数据条数减少时可能导致旧数据残留。最终，通过遍历并删除原有数据后再填充新数据的方式修正了这个问题。

现象描述

1：存在两个下拉框订单平台与订单店铺，二者联动，具体如下：

在这里插入图片描述

2：数组因各种原故存储在变量中

在这里插入图片描述

3：二者皆由接口动态获取数据：

 // 获取平台更新
  watch: {
    source (newVal, oldVal) {
      if (newVal != oldVal) {
        this.formData.shopId = ''
        this.getShopList(newVal)
      }
    }
  },
  computed: {
    source() {
      return this.formData.source
    }
  },
 // 获取店铺相关数据
    getShopList (source) {
      let params = { source }
      if (!source) return
      getShopList(params).then(res => {
        if (res.success) {
          shopList = res.data || []
        }
      })
    },

此时，无法获取到店铺列表数据，但通过断点发现数据更新但视图未更新；

解决–$set

 // 获取店铺相关数据
    async getShopList (source) {
      let params = {source}
      if (!source) return
      let res = await getShopList (params)
      for (let i in res.data) {
        this.$set(shopList, i, res.data[i])
      }
    },

问题

此时发现：当更换平台时若查询店铺结果条数不一致—之前的多于之后的，会产生问题。比如第一次查询两条，第二次为一条，此时展示的第二次也为两条，比实际多了一条。

原因：$set会通过下标修改数组，此时虽返回为一条，但之前的却为两条，之前数据下标为0的将会被之后下表为0的替代，至于下标为1的查询不到，无法替换，故展示为两条；

修改：利用$delete先将之前的店铺列表数据删除（注意直接用等号赋值，监听不到，会导致店铺列表一直为空）

// 获取店铺相关数据
    getShopList (source) {
      let params = { source }
      if (!source) return
      for (let j in shopList) {
        this.$delete(shopList, j)
      }
      getShopList(params).then(res => {
        if (res.success) {
          let data = res.data || []
          for (let i in data) {
            this.$set(shopList, i, data[i])
          }
        }
      })
    },