【问题标题】：Can't get Chart.js to run in a Vue.js component无法让 Chart.js 在 Vue.js 组件中运行
【发布时间】：2016-08-20 21:58:19
【问题描述】：

所以我试图在 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 行，我得到200px 作为输出？！！ WTF 是怎么回事？.. Vue 现在搞砸了我的脑袋

链接到 jsFiddle 供您使用（在控制台中查看结果） https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR

【问题讨论】：

你的小提琴对我来说运行良好，只需删除 display:none。有什么问题？
你是对的......问题出在其他地方。如果有人偶然发现这个问题，我会留下答案。无论如何，感谢您调查它，您的评论确实帮助了我

标签： chart.js vue.js

【解决方案1】：

我知道原因并会告诉你，以防万一有人碰巧处于相同的位置：

我无法让它在在 Vue Router 显示的 vue 组件中工作...我认为这是因为 我应该使用 ready 挂钩而不是 @987654322 @...compiled，DOM 还没有完全准备好。

【讨论】：