0

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

axios请求正确完成，但从未v-for填充v-cards. 我也尝试过在渲染完成之前发出请求（在创建生命周期事件之前），这也失败了。

编辑：数据检索成功完成，这让我认为 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"
            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>

4

2 回答 2

0

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

async mounted() {  

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

希望这对你有用。

于 2019-09-11T16:03:59.040 回答
0

好的，所以这里没有任何效果，所以我开始思考如果在正确检索数据后 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）。

但是问题现在解决了！

于 2019-09-12T07:41:55.730 回答