データをフェッチした後にグラフを描画しないvueを持つCharts.js

Question

これはjsonレスポンスの外観です。[[61,57,34],[1,1,3]] ラベルの最初の配列とデータの2番目の配列を使いたいとします。

labels and dataをappの中に手動で設定すると、それはうまく動作します。ページの

例えば labels: ["q", "w", "e"] data: [1, 5, 10]

Vue.component('chart', { 
    props: ['labels', 'data', 'type'], 
    template: ` 
    <canvas style="width: 512px; height: 256px"></canvas> 
    `, 
    mounted: function() { 
    new Chart(this.$el, { 
     type: this.type, 
     data: { 
      labels: this.labels, 
      datasets: [{ 
       label: '# of Votes', 
       data: this.data, 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
     }) 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: { 
    message: "test", 
    labels: [], 
    data: [] 
    }, 
    methods: { 
    fetchData: function() { 
     this.$http.get('/admin/fetch_data').then(res => { 
     this.labels = res.body[0]; 
     this.data = res.body[1]; 
     }) 
    } 
    }, 
    beforeMount() { 
    this.fetchData() 
    } 
}); 

コンポーネント

<div id="app"> 
    {{message}} 
    <chart :labels="labels" :data="data" type="bar"></chart> 
</div> 

データがロードされているように見えるが、ページには、チャートのバーがそこにいるん。

Answer 1

問題は、あなたがあなたのデータをフェッチする非同期タスクを実行しているとして、あなたのデータがまだフェッチではないです。その時間までに、コンポーネントのマウントされたフックは、propsとして渡されるデータがまだロードされていないので空の小道具で呼び出されます。ルートVUEインスタンスにfalseにプロパティloadedセットを追加し、小道具

として渡し

Vue.component('chart', { 
    props: ['labels', 'data', 'type' 'loaded'], 
    template: ` 
    <canvas style="width: 512px; height: 256px"></canvas> 
    `, 
    watch:{ 
     loaded(isLoaded){ 
      if(isLoaded){ 
       this.drawChart(); 
      } 
     } 
    }, 
    methods:{ 
     drawChart: function() { 
     new Chart(this.$el, { 
      type: this.type, 
      data: { 
       labels: this.labels, 
       datasets: [{ 
        label: '# of Votes', 
        data: this.data, 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
      }) 
    } 
    } 
}); 


new Vue({ 
    el: '#app', 
    data: { 
    message: "test", 
    labels: [], 
    data: [], 
    loaded: false 
    }, 
    methods: { 
    fetchData: function() { 
     this.$http.get('/admin/fetch_data').then(res => { 
     this.labels = res.body[0]; 
     this.data = res.body[1]; 
     this.loaded = true; 
     }) 
    } 
    }, 
    created() { 
    this.fetchData() 
    } 
}); 

HTML

<div id="app"> 
    {{message}} 
    <chart :labels="labels" :data="data" :loaded="loaded" type="bar"></chart> 
</div> 

• ：

  だから、このようにそれを行います

• 変更するloaded

• セットアップあなたのths.$http.get()リクエストによって返された約束の成功コールバックでtrueにごchartコンポーネントでwatcherこのloaded小道具を見守っ

• はdrawChartメソッドを呼び出すときloaded小道具changes to true`を