Vue.jsコンポーネントでChart.jsを実行できない

Question

Vue.jsコンポーネント内でChart.jsを使用して素敵なグラフを表示しようとしています...複雑ではありませんが、壁に当たっています。ここで

は私のコンポーネントのコードは、（構文がVue.js webpack boilerplateに基づいている）である

<template> 

    <canvas v-el:canvas style="width: 100%; height: 200px"></canvas> 

</template> 

<script> 
import Chart from 'chart.js' 

export default { 
    compiled: function() { 

    // fetch canvas DOM element 
    let canvas = this.$els.canvas 

    // init chart.js 
    let chart = new Chart(canvas, { 
     type: 'bar', 
     data: { 
     labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3] 
     }] 
     }, 
     options: { 
     scales: { 
      yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
      }] 
     } 
     } 
    }) 
    console.log(chart) 

    } 
} 
</script> 

私は私ができる限り部品を簡素化し、（後でpropsを使用して、実際のデータをバインドします）ドキュメントの例からのデータを使用。

だから私は、コンソールでこのエラーを取得しておく：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

私はそれを見上げ、これがVue.js.で使用getComputedStyleに渡される変数とは何かを持っているようです

私のベスト推測では、this.$els.canvasは正しいオブジェクトを返しません。しかし、私がconsole.logを使用してコンソールに出力すると正しいと思われます。

console.log(canvas) 
// outputs <canvas style="width: 300px; height: 150px;"></canvas> 
console.log(canvas.tagName) 
// outputs CANVAS 
console.log(canvas.style.height) 
// outputs 200px 

うーん、これは実際に奇妙であると役に立つことができます：あなたは、私は、テンプレートでキャンバスstyle.heightを設定することがわかり、私はconsole.log(canvas)を行う場合、私はheight: 150pxを見ましたが、下記のconsole.log(canvas.style.height) 2行ならば、私はANとして200pxを取得出力？!! WTFは起こっているの？.. Vueのが今の私の頭をいじりされ

あなたが一緒にプレイするためjsFiddleへのリンク（コンソールで結果をチェックしてください） https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR

Answer 1

私はなぜ考え出しとなりますあなたが知っている、誰かが同じ位置にあることを起こる念のために：

私はこれがVueのルータで表示VUEコンポーネント内を動作させることができなかった...私は私がすべきので、それがあったことを考え出しの代わりにreadyフックを使用しました ... compiledにDOMが完全に準備されていません。