[英]Vuejs: how to manipulate elements using webpack template?
That element won't exist at that stage because it hasn't been mounted, it needs to be done inside the mounted hook:该元素在那个阶段不会存在,因为它尚未安装,它需要在安装的钩子内完成:
<template>
<canvas id="canvas-basic"></canvas>
</template>
<script type="text/javascript">
export default{
mounted(){
console.log(document.getElementById('canvas-basic'));
}
}
</script>
See: see: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks见:见: https ://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
And here's the JSFiddle: https://jsfiddle.net/ksg7vyyq/这是 JSFiddle: https ://jsfiddle.net/ksg7vyyq/
You could also use a ref :您也可以使用ref :
<template>
<canvas ref="canvasBasic"></canvas>
</template>
<script type="text/javascript">
export default{
mounted(){
console.log(this.$refs.canvasBasic);
}
}
</script>
Here's the JSFiddle: https://jsfiddle.net/gkc5c1ph/这是 JSFiddle: https ://jsfiddle.net/gkc5c1ph/
Also, you appear to be writing code outside of the Vue object, make sure you look over the docs to understand how to correctly format your code.此外,您似乎是在 Vue 对象之外编写代码,请确保您查看文档以了解如何正确格式化您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.