Vue.js 如何将带有axios.get（）数组数据的渲染条形图导出到vue中的更高级别组件

我正在父vue页面上显示一系列图表vue组件。在使用其中一个图表测试axios调用时，我能够返回一个列表来填充bardata。我一直在跟踪这个.bardata直到mounted方法，当我调用这个.renderChartthis.bardata，这个.options时，bardata似乎消失了

当前条形图组件：

<script>
  import axios from 'axios'
  //Importing Bar class from the vue-chartjs wrapper
  import { Bar, mixins } from 'vue-chartjs'
  const API_URL = 'http://localhost:58881'
  //Exporting this so it can be used in other components
  export default {
    extends: Bar,
    mixins: [mixins.reactiveData],
    data () {
      return {
        bardata: {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: null,
                borderWidth: 1
              }
              ]
            },
        //Chart.js options that controls the appearance of the chart
        options: {
          title : {
            display : true,
            position : "top",
            text : "",
            fontSize : 18,
            fontColor : "#111"
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false,
          scales : {
            yAxes : [{
            ticks : {
              min : 0
            }
            }]
          }
        }
      };
    },
    mounted () {
      //renderChart function renders the chart with the datacollection and options object.
      console.log(this.bardata)
      this.renderChart(this.bardata, this.options)
    },
    created() {
        axios.get(API_URL + "/api/admin/GetChart" ,{
          params:{
          chartName: 'LoginsBarChart',
          userToken: this.userToken,
        } ,
        headers: {
          token: this.userToken
        }
        }).then(response => {
            this.bardata.datasets.data = response.data
        })          
      }
  }
</script>

<template>
  <section class="container">
    <h1>Usage Analysis Dashboard</h1>
    <div class="Chart">
      <div class="column">
        <h3>Logins vs Failures</h3>
        <logins-bar-chart></logins-bar-chart>
      </div>
    </div>
  </section>
</template>

<script>
  import LoginsBarChart from '@/components/LoginsBarChart.vue'

  export default {
    name: 'VueChartJS',
    components: {
      // Bar Chart 
        LoginsBarChart,
    }
  }
</script>

---

图表会显示得很好。

问题在于，您正在对创建的方法执行一个以承诺结尾的请求。在运行挂载的方法之前，此承诺不会始终得到解决。我的建议是将renderChart调用移动到.then的created方法上

mounted () {
  //renderChart function renders the chart with the datacollection and options object.
  console.log(this.bardata)

},
created() {
    axios.get(API_URL + "/api/admin/GetChart" ,{
      params:{
      chartName: 'LoginsBarChart',
      userToken: this.userToken,
    } ,
    headers: {
      token: this.userToken
    }
    }).then(response => {
        this.bardata.datasets.data = response.data
        this.renderChart(this.bardata, this.options)
    })          
  }

---

我知道了！bardata从未被发送回原始返回参数，因此我想我会尝试使用我创建的参数设置整个bardata 工作结果如下：

<script>
  import axios from 'axios'
  //Importing Bar class from the vue-chartjs wrapper
  import { Bar, mixins } from 'vue-chartjs'
  const API_URL = 'http://localhost:58881'
  //Exporting this so it can be used in other components
  export default {
    extends: Bar,
    mixins: [mixins.reactiveData],
    data () {
      return {
        bardata: {},
        //Chart.js options that controls the appearance of the chart
        options: {
          title : {
            display : true,
            position : "top",
            text : "",
            fontSize : 18,
            fontColor : "#111"
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false,
          scales : {
            yAxes : [{
            ticks : {
              min : 0
            }
            }]
          }
        }
      };
    },
    created() {
        axios.get(API_URL + "/api/admin/GetChart" ,{
          params:{
          chartName: 'LoginsBarChart',
        } ,
        headers: {
          token: this.userToken
        }
        }).then(response => {
          this.bardata = {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: response.data,
                borderWidth: 1
              }
              ]
            },
            //console.log(this.bardata)
            this.renderChart(this.bardata, this.options)

        })          
      }
  }
</script>

---

这对我的特定问题不起作用，但我明白你的意思，并首先解决了这个问题。我会说这让我找到了合适的答案！！！谢谢你！

<script>
  import axios from 'axios'
  //Importing Bar class from the vue-chartjs wrapper
  import { Bar, mixins } from 'vue-chartjs'
  const API_URL = 'http://localhost:58881'
  //Exporting this so it can be used in other components
  export default {
    extends: Bar,
    mixins: [mixins.reactiveData],
    data () {
      return {
        bardata: {},
        //Chart.js options that controls the appearance of the chart
        options: {
          title : {
            display : true,
            position : "top",
            text : "",
            fontSize : 18,
            fontColor : "#111"
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false,
          scales : {
            yAxes : [{
            ticks : {
              min : 0
            }
            }]
          }
        }
      };
    },
    created() {
        axios.get(API_URL + "/api/admin/GetChart" ,{
          params:{
          chartName: 'LoginsBarChart',
        } ,
        headers: {
          token: this.userToken
        }
        }).then(response => {
          this.bardata = {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: response.data,
                borderWidth: 1
              }
              ]
            },
            //console.log(this.bardata)
            this.renderChart(this.bardata, this.options)

        })          
      }
  }
</script>