将 props 传递给 datas vuejs答案

【问题标题】：Pass props to datas vuejs将 props 传递给 datas vuejs
【发布时间】：2020-05-15 08:58:16
【问题描述】：

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

我在父组件中使用 axios get 调用，并通过 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 调用是在创建的函数中。

谢谢！！

【问题讨论】：

这里的父组件是什么？这里的子组件是什么？你指的是什么数据？你指的是什么道具？您如何将道具从父母传递给孩子？

标签： vuejs2 vue-props

【解决方案1】：

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

this.radialChartDatas = response.data;

到

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

你可以阅读Array Change Detection

【讨论】：

【解决方案2】：

这是父组件：


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

【讨论】：