VueJs/ChartJs - 私はVueの開発ツールで

Question

をコンポーネントをクリックすると、単一のファイルコンポーネント計算プロパティは、私はいくつかのハードコーディングされたデータのための簡単な可視化をレンダリングするためにChart.Jsを使用して単一のファイル構成要素を持ってレンダリングします。私は、index.htmlのheadセクションのCDNを通じてChart.Jsライブラリを呼び出しています。

私は公式のWebpackテンプレートを使用しています。

何らかの理由で、私はVueの開発ツールの拡張機能の内部コンポーネントをクリックしない限り、チャートは表示されません。

私が作成した/マウントされ、それが働いていないに計算されたから、それを変更しようとしました。

ここに私のコードです。これを適切にレンダリングする助けがあれば、非常に感謝しています。

<template lang="html"> 
    <div> 
    <div class="row"> 
     <div class="col-sm-12 col-md-4"> 
     <canvas id="carbChart"></canvas> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 

export default { 
    data() { 
    return { 
     calories: 3000, 
     childSex: 'male', 
     childAge: 'eighteen' 
    } 
    }, 
    computed: { 
    nutrientCharts: function() { 
     let calories = this.calories; 

     let carbCtx = document.getElementById('carbChart').getContext('2d'); 

     let carbChart = new Chart(carbCtx, { 
     type: 'doughnut', 
     data: { 
      labels: ['Low', 'Good', 'Too Much'], 
      datasets: [{ 
      label: 'carbs', 
      data: [calories * .45, calories * .65, calories * 1], 
      backgroundColor: ['orange', 'blue', 'red'] 
      }] 
     } 
     }); 
    } 
    } 
} 
</script> 

Answer 1

computedプロパティでメソッドを定義しましたが、使用したことはありません。

あなたはこの実行を取得したいと仮定すると、取り付けられた上でチャートを読み込む：

mounted() { 
    this.nutrientCharts(); 
}, 
methods: { 
    nutrientCharts: function() { 
    // your code here 
    } 
}