Estoy tratando de hacer que mi lienzo se ajuste a su contenedor, en un componente vue. Disparo resizeCanvas() en montado, pero la altura y el ancho del contenedor son 0. ¿Cómo puedo tener un lienzo que se ajuste a su contenedor, de modo que pueda cambiar el tamaño del contenedor usando css y actualizará el lienzo? (Perdón por mi inglés, no hablo con fluidez)
<template lang="html"> <div class="container" ref="container"> <canvas ref="canvas" :width="width" :height="height"></canvas> </div> </template> <script> export default { name: "monster", data () { return { width: 512, height: 512 } } methods: { resizeCanvas(){ console.log(this.$refs.container.offsetWidth); // logs 0 this.width = this.$refs.container.offsetWidth this.height = this.$refs.container.offsetWidth } }, mounted () { console.log(this.$refs.container.offsetWidth) // logs 0 window.addEventListener("resize", this.resizeCanvas); this.resizeCanvas() }, unmounted() { window.removeEventListener("resize", this.resizeCanvas); }, } </script> <style lang="css" scoped> .container { width: 100%; height: 100% } </style>El enlace del ciclo de vida montado en VueJS no garantiza que el DOM esté listo: deberá esperar this.$nextTick() y luego verificar las dimensiones de su elemento contenedor.
Puede hacerlo moviendo la lógica a la devolución de llamada de nextTick, es decir:
mounted () { this.$nextTick(() => { console.log(this.$refs.container.offsetWidth); window.addEventListener("resize", this.resizeCanvas); this.resizeCanvas(); }); },Si está familiarizado con la forma async/await de hacer las cosas, también puede hacer esto:
async mounted () { await this.$nextTick(); console.log(this.$refs.container.offsetWidth); window.addEventListener("resize", this.resizeCanvas); this.resizeCanvas(); }, Otra posibilidad es delegar esta responsabilidad de "esperar a que DOM esté listo" a la función resizeCanvas , para que tenga una abstracción completa y una separación de preocupaciones:
methods: { async resizeCanvas(){ await this.$nextTick(); this.width = this.$refs.container.offsetWidth this.height = this.$refs.container.offsetWidth } }, mounted () { window.addEventListener("resize", this.resizeCanvas); this.resizeCanvas(); },