Не удается заставить Chart.js работать в компоненте Vue.js

Question

Итак, я пытаюсь отобразить хорошую диаграмму с использованием Chart.js внутри компонента Vue.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'.

я смотрел его, кажется, что это что-то делать с переменной, переданной в getComputedStyle, используемой в Vue.js.

Мое лучшее предположение было бы то, что 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 строки ниже, я получаю 200px как вывод ?!! WTF происходит? .. Vue баловаться с моей головой прямо сейчас

Ссылка на jsFiddle для Вас, чтобы играть с (проверьте результат в консоли) https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR

Answer 1

Я понял, почему и будет пусть вы знаете, на всякий случай, если кто оказывается в том же положении:

я не мог получить эту работу внутри компонента вю, отображаемого Вью Router ... Я понял, что это было потому, что я должен использовали ready крюк вместо compiled ... В compiled DOM еще не готов.