vue.js 异步axios循环请求第一次渲染数据为空不报错，需要第二次渲染数据才呈现出来

Question

先上代码

  <div class="main" v-if="filterGoods && filterGoods.length">
    <ul
      class="m_nav"
      v-for="(good, i) in filterGoods[index]"
      :key="i"
      @click="handleGoto('goods', good.id)"
    >
      <el-image :src="good.g_img_path" fit="contain"></el-image>
      <li class="m_name">{{ good.g_name }}</li>
      <li class="m_title">{{ good.g_title }}</li>
      <li class="m_price">{{ good.g_price }}￥</li>
    </ul>
  </div>
  <div v-else>没有数据</div>

// created
this.handleGetGoods()

// computed() 
filterGoods() {
      return this.goods.map(item => {
        return item.slice(0, 5);
      });
    },

// methods
async handleGetGoods() {
      for (let item of this.category) {
        await this.$axios
          .post("/api/goods/search_cid", {
            id: item.id
          })
          .then(res => {
            this.goods.push(res.data.goods);
          });
      }
    },
    

问题：这样一开始加载页面是this.goods是空数组，刷新一下代码页面刷新了this.goods就是期望结果了，请问这个问题怎么解决

Answer 1

你可以换个方式异步获取goods吗？

async  handleGetGoods()  {

  const  promiseQuene  =  this.category.map(item  =>

    this.$axios.post("url",  { id:  item.id  })

  );

  const  goodsList  =  await  Promise.all(promiseQuene);

  this.goods.push(...goodsList);

}

因为我不太确定你的问题具体是哪个点，我只是觉得你请求接口的方式不够好。有什么问题请继续评论

Answer 2

你的数据应该正确更新了，只不过 filterGoods 里面使用的 .slice 方法不能触发响应式更新，请改用 .splice。