How can I dynamically populate V-Cards after making an Axios request to retrieve data?
The Axios request is successful, but the v-for loop does not populate with V-Cards. I've also attempted to make the request before the rendering is completed (using the beforeCreate lifecycle event), but that approach also fails.
Edit: The data retrieval is successful, leading me to believe there may be an issue with how the v-for loop is functioning? Could I be overlooking something? View response data here
<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>