将道具传递给数据视图

Question

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

我在父组件中使用 axios get 调用并通过 props 将数据发送到子组件。我想将 props 传递给数据以重新使用它们来构建图表 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 调用是在创建的函数中。

谢谢！！

Answer 1

这是父组件：


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

Answer 2

原因是Vue中的Reactivity系统。只需更改以下

this.radialChartDatas = response.data;

到

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

您可以阅读有关 Array Change Detection

将道具传递给数据视图

Pass props to datas vuejs

vuejs2

vue-props