axios请求检索数据后如何使用V-For？

Posted 2023-02-22

【中文标题】axios请求检索数据后如何使用V-For？

【英文标题】：How to use V-For after an axios request retrieves data?

【发布时间】：2020-01-13 05:50:31

【问题描述】：

Axios 请求检索到数据后如何动态填充V-Cards？

axios 请求正确完成，但v-for 永远不会填充v-cards。我也试过在渲染完成之前发出请求（beforeCreate生命周期事件）这也失败了。

编辑：数据检索成功完成，这让我认为 v-for 的工作方式存在问题？也许我错过了什么？ https://imgur.com/a/uOqZ2wN（回复数据）

<template>
  <v-container class="pa-2" fluid>
      <v-layout v-for="(clip) in clipData" :key="clip.id">
        <v-card>
          <v-img
            :src="clip.thumbnail_url"
            class="white--text"
            
          >
            <v-card-title class="fill-height align-end" v-text="clip.title"></v-card-title>
          </v-img>
        </v-card>
      </v-layout>
  </v-container>
</template>

<script lang="ts">
// Imports omitted for brevity


@Component(
  components: 
)
export default class Clips extends Vue 

  public clipData: any;

  mounted() 
    // Axios Request Data From twitch helix API regarding Clip Information on My channel
    helix.get('clips?broadcaster_id=<myidOmitted>&first=10').then((data) => 
        this.clipData = data.data.data; // <-- Third data is the array of clips i need.
    ).catch((err) => 
        console.log(err)
    )
  

</script>

【问题讨论】：

我很抱歉 helix.get 是 Axios 调用，Helix 是带有基本 URL 的 axios.create，请参阅mounted() 生命周期事件 - 在 sn-p 中使用更好的 cmets 更新问题

如果你在axios请求的回调中赋值后打印出this.clipData会发生什么？是undefined吗？

不是未定义，而是一个空数组，这很奇怪，因为通过 chrome 调试会显示正确返回的 10 个剪辑对象的数组

您确定，您访问它正确吗？ data.data.data?

可能数据在另一个属性中

【参考方案1】：

由于你使用的是“ts”，我们也可以这样写（将挂载的钩子设为异步，只需将 await 用于 axios 调用）

async mounted()   

  let response = await helix.get('clips?broadcaster_id=<myidOmitted>&first=10');
  if(response.data)
    this.clipData = response.data.data;
     
 

希望这对你有用。

【参考方案2】：

好的，所以这里没有任何效果，所以我开始思考如果在正确检索数据后 UI 没有更新怎么办，

所以在我的父容器中，我在 v-if 中放置了一个属性

<v-container class="ma-10" v-if="!isFetching" >

当 Axios 调用完成后，我将此属性更新为 false

helix.get('clips?broadcaster_id=<idOmitted>&first=8').then((data) => 
    this.clipData = data.data.data; // <-- Third data is the array of clips i need.
    this.isFetching = false;

这立即解决了，我猜是在设置变量时触发了 UI 的重新渲染？我不确定为什么这会起作用，因为我们已经设置了一个变量（clipData）。

但是问题现在解决了！