How to prevent Computed property getting undefined in vue.js? - vue.js

Question

I'm calculating the container width and height using computed property and assigns it to the canvas in vue js.
export default {
...
computed: {
dimensions() {
return document.getElementById(
'canvas-container'
);
},
},
...
}
<div id="canvas-container">
<canvas
v-bind:id="id"
:height="dimensions.clientHeight"
:width="dimensions.clientWidth"
></canvas>
</div>
But the issue is that I'm getting an undefined error like:
cannot read the property clientHeight of null.
How can I avoid this.?

Answer 1

The canvas-container element doesn't exist yet when the dimensions computed property accesses it. The first render pass generates the virtual DOM but no actual DOM nodes are created yet.
You need to defer accessing the element until the component has mounted and the DOM element will exist.
There's no use using a computed property here since the DOM element is not reactive (it won't automatically update when the element resizes).
If possible, use a ref instead of using getElementById.
new Vue({
el: '#app',
data: {
width: 0,
height: 0,
},
mounted() {
// Element is now available
const el = this.$refs.el
this.width = el.clientWidth
this.height = el.clientHeight
}
})
#app {
border: 1px solid black;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="el">
Element size: {{ width }} x {{ height }}
</div>
If you need the dimensions to automatically update, you'll have to use some other mechanism for observing size changes such as a window resize listener or ResizeObserver.