0

我知道这个问题经常出现在 Stackoverflow 中，但即使有多个答案，我也无法解决我的答案。

我在父组件中使用 axios get 调用，并通过道具将数据发送到子组件。我想将道具传递给数据以重新使用它们来构建图表 vie apexChart。并且该实例无法识别数据。


<template>
  <div id="gauge">

    <apexchart type="radialBar" height="800" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
export default {
  props: {
    radialChartDatas: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      allDatas: this.radialChartDatas,
      series: [30],
      topicQuote: null,
      chartOptions: {

        //some code for the char//

        labels: []
      }
    };
  },

  created() {
    let newlabel = this.chartOptions.labels;
    newlabel.push(this.allDatas[0].survey_topicTitle);
  },

  watch: {
    radialChartDatas(val) {
      this.allDatas = val;
    }
  }
};
</script>

看来 allDatas 是未定义的。任何想法？

ps：我在父组件中的 axios 调用是在创建的函数中。

谢谢！！

4

2 回答 2

0

原因是ReactivityVue中的系统。只需更改以下内容

this.radialChartDatas = response.data;

至

this.radialChartDatas.push(...response.data);

您可以阅读有关阵列变化检测的信息

于 2020-05-15T13:52:01.823 回答
0

这是父组件：


<template>
  <div style="margin-top:100px" class="home">
    <RadialChartPage v-bind:radialChartDatas="radialChartDatas" />
  </div>
</template>

<script>
import RadialChartPage from "@/components/RadialChartPage.vue";
import axios from "axios";
export default {
  name: "RadialChart",

  components: {
    RadialChartPage
  },

  data() {
    return {
      radialChartDatas: []
    };
  },

  created() {
    axios
      .get(`http://localhost:3005/submit/` + this.$route.params.id)
      .then(response => {
        this.radialChartDatas = response.data;
      })
      .catch(e => {
        console.log(e);
      });
  }
};
</script>

</style>
于 2020-05-15T09:30:53.383 回答