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

Question

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

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

编辑：数据检索成功完成，这让我认为这是 v-for 工作方式的问题？ 也许我错过了什么？ https://i.stack.imgur.com/HVBc7.jpg(响应数据(

<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"
height="200px"
>
<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>

Answer 1

既然你使用的是"ts"，我们也可以这样写(将挂载的钩子作为异步，只使用 await for axios 调用(

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

希望这对你有用。

Answer 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(的地方起作用。

但是问题现已解决！