Как экспортировать визуализированную гистограмму с данными массива axios.get () в компонент более высокого уровня в vue

Question

Я отображаю ряд компонентов Vue диаграммы на родительской странице VUE. Во время тестирования вызовов axios на одном из графиков я могу вернуть список для заполнения бардаты. Я отслеживаю this.bardata вплоть до метода mount (), и когда я вызываю this.renderChart (this.bardata, this.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>

В консоли моего браузера this.bardata показывает соответствующий массив [0,2,2].

Это мое родительское значение, которое отображает компонент диаграммы:

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

Консоль и внешний интерфейс Pic (первый раз, нужно 10 репутаций, чтобы опубликовать реальное изображение)

В целом, я не вижу, где я иду не так, если массив корректен вплоть до и даже внутри метода mount (), почему диаграмма не заполняется в браузере?

Перед созданием вызова axios, в bardata.datasets.data, я бы жестко закодировал [0,2,2],

 bardata: {
              labels: ['Failed', 'Successful', 'Total'],
              datasets: [
              {
                label: 'Attempts',
                backgroundColor: '#455A64',
                //Data to be represented on y-axis
                data: null,
                borderWidth: 1
              }
              ]
            },

и график будет отображаться нормально.

Answer 1

Проблема в том, что вы делаете запрос на созданный метод, который заканчивается обещанием. Это обещание не всегда разрешается до запуска смонтированного метода. Я бы предложил переместить вызов renderChart в .then созданного метода

.

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

Answer 2

Я понял это! bardata никогда не отправлялся обратно к исходному параметру возврата, поэтому я решил, что я попытаюсь установить все bardata с помощью моего create () вот рабочий результат:

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