Vue.js中如何获取Observer对象数组中的目标值？

核心问题 #

你遇到的问题有两个关键原因：

• 异步请求时序错误：axios.get是异步操作，你在循环结束后直接赋值数组并打印时，所有请求都还没返回结果，此时this.suspendedReserveMemo[650]确实是undefined。浏览器控制台的数组是引用类型，会实时显示最新值，所以你展开能看到650的内容，但那是请求完成后才更新的。
• Vue数组响应式失效：直接通过索引给数组赋值（比如roomMemoArray[value.roomId] = 'xxx'），Vue无法检测到这种变化，就算请求完成，数组的响应式也可能出问题，导致后续访问异常。

解决方案 #

方案1：改用对象存储（更推荐） #

考虑到roomId是大索引，用数组会浪费大量空值空间，改用对象存储更合理，同时避免响应式问题：

async getSuspendReserveMemo () {
  const roomMemoObj = {}
  // 用Promise.all等待所有请求完成
  await Promise.all(this.schedule.map(async (value) => {
    try {
      const res = await axios.get(`/shop/${this.selectedShopId}/room/${value.roomId}/suspend_memo`)
      roomMemoObj[value.roomId] = res.status === 204 ? '' : res.data
    } catch (error) {
      roomMemoObj[value.roomId] = ''
    }
  }))
  this.suspendedReserveMemo = roomMemoObj
  console.log('this.suspendedReserveMemo[650]', this.suspendedReserveMemo[650]) // 此时能正确拿到值
}

后续访问直接用this.suspendedReserveMemo[650]即可，视图遍历可通过Object.entries(this.suspendedReserveMemo)处理。

方案2：继续使用数组（修复异步与响应式） #

如果必须用数组，需要用Vue的$set方法保证响应式，同时等待所有请求完成：

async getSuspendReserveMemo () {
  const roomMemoArray = []
  await Promise.all(this.schedule.map(async (value) => {
    try {
      const res = await axios.get(`/shop/${this.selectedShopId}/room/${value.roomId}/suspend_memo`)
      const memoContent = res.status === 204 ? '' : res.data
      this.$set(roomMemoArray, value.roomId, memoContent)
    } catch (error) {
      this.$set(roomMemoArray, value.roomId, '')
    }
  }))
  this.suspendedReserveMemo = roomMemoArray
  console.log('this.suspendedReserveMemo[650]', this.suspendedReserveMemo[650])
}

this.$set能让Vue检测到数组的索引赋值操作，保证响应式生效；async/await+Promise.all确保所有请求完成后再赋值数组，此时就能正确获取到对应索引的值。

内容的提问来源于stack exchange，提问作者lionflick