Question

我正在尝试构建一个应用程序，该应用程序从我创建的API中提取数据（django-rest-framework），并基于该数据显示d3饼图。不幸的是，该图表不等待axios获得响应并抛出错误。似乎图表只能访问data()中定义的变量，以后对该变量的任何更改都不会影响它。

<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>

我想念什么吗？是否有一种方法可以让整个页面等待API调用完成并将该值推送到data()？

Answer 1

您可以通过执行简单的v-if

来解决此问题

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

Answer 2

好吧，我可以使用它，但是将所有数据放在一个对象中

<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>

看起来两个引用响应对象的.then（）函数无效。

Answer 3

数据不是应该由函数返回的对象吗？

像这样：

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

如何使componenet等待axios从API获得响应？

3 个答案: