时间戳

首页 > 解决方案 > Vuejs自定义插件getelementbyid不起作用

javascript - Vuejs自定义插件getelementbyid不起作用

问题描述

我正在尝试创建以下 codepen 的 vuejs 插件

https://codepen.io/hakimel/pen/nLFDv?editors=0010

如果我不换线，一切正常

var canvas = document.body.appendChild( document.createElement( 'canvas' ) );

但是如果我尝试使用以下行

var canvas = document.getElementById('mycanvas')

它总是返回

chart.js?28d6:5 Uncaught TypeError: Cannot read property 'getContext' of null

我相信发生这种情况是因为 div#mycanvas 在这个特定时刻不存在。但是解决这个问题的方法是什么？

这是我的 chart.js

export default {
    install: function(Vue) {
        Object.defineProperty(Vue.prototype, 'linechart', { value: new LineChart({ data: [] }) });
    }
}

然后我在 vue-component 中使用以下代码

created(){
            this.linechart.populate([
                { label: 'One', value: 0 },
                { label: 'Two', value: 100 },
                { label: 'Three', value: 200 },
                { label: 'Four', value: 840 },
                { label: 'Five', value: 620 },
                { label: 'Six', value: 500 },
                { label: 'Seven', value: 600 },
                { label: 'Eight', value: 1100 },
                { label: 'Nine', value: 800 },
                { label: 'Ten', value: 900 },
                { label: 'Eleven', value: 1200, future: true },
                { label: 'Twelve', value: 1400, future: true }
            ]);

            this.linechart.start();
        }

提前致谢！

标签： javascriptvue.jsvuejs2vue-component

解决方案

推荐阅读