如何让组件等待 axios 得到 API 的响应？

Question

I'm trying to build an app that pulls data from API created by me (django-rest-framework) and based on that data, it should display d3 pie chart. Unfortunatly, the chart does not wait for axios to get a response a throws an error. It seems that chart can get access only to variables defined in data() , and any later changes on that variables does't affect it.

<template v-if="loaded">
  <div id="question">
    <h1>Question view</h1>
    <h2>{{question}}</h2>
    <v-chart :chartData="chartData"></v-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loaded: false,
      question: null,
      chartData: {
        chartType: 'pieChart',
        selector: 'chart',
        title: 'Important Data',
        width: 1000,
        height: 700,
        metric: 'option_votes',
        dim: 'option_text',
        data: null,
      },
    }
  },
  created: function() {
    this.axios
      .get("http://localhost:8000/api/questions/" + this.$route.query.q)
      .then(response => (this.question = response.data))
      .then(response => (this.chartData.data = response.data.options))
      .then(this.loaded = true)
      .catch(error => (this.error = error));
  },
};
</script>

<style lang="scss" scoped>
</style>

Am I missing something? Is there a way for a whole page to wait until API call is done and push that value to data() ?

Answer 1

You can solve it by doing simple v-if

<v-chart v-if="chartData.data" :chartData="chartData"></v-chart>

Answer 2

Ok, I've got it to work but placing all data inside one object:

<template>
  <div id="question">
    <h1>{{ data.question.question_text }}</h1>
    <v-chart :chartData="data.chartData"></v-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created: function() {
    this.axios
      .get("http://localhost:8000/api/questions/" + this.$route.query.q)
      .then(
        response =>
          (this.data = {
            question: response.data,
            chartData: {
              chartType: "pieChart",
              selector: "chart",
              title: "Important Data",
              width: 1000,
              height: 700,
              metric: "option_votes",
              dim: "option_text",
              data: response.data.options
            }
          })
      )
      .catch(error => (this.error = error));
  }
};
</script>

It looks like two.then() functions referencing response object is not valid.

Answer 3

Isn't data supposed to be an object returned by a function?

Like so:

data: function () {
    return { a: 1 }
 }