Estoy tratando de obtener el ancho de un contenedor dinámicamente en vue con la ayuda de refs. Pero, o está devolviendo el valor anterior, o se muestra indefinido. Supongo que estoy haciendo algo mal. Solo quiero el ancho de un div en particular dinámicamente.
Me referí a Vue: establecer el ancho de un componente dinámicamente , vuetify.js cómo obtener el ancho completo del contenedor v y Vue: establecer el ancho de un elemento igual al ancho de otro elemento, pero no tuve suerte.
const app = new Vue({ el: '#app', mounted () { this.screenWidth() }, methods: { screenWidth() { console.log("screen", this.$refs.container?.offsetWidth); return `${this.$refs?.container?.offsetWidth}`; }, } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" ref="container"> Screen {{ screenWidth() }} </div>Además de Vue JS: cómo obtener el tamaño de la ventana cada vez que cambia la respuesta aceptada, puede agregar una llamada mounted() siempre para tener el ancho.
const app = new Vue({ el: '#app', data() { return { sWidth: null }; }, created() { window.addEventListener("resize", this.screenWidth); }, mounted () { this.screenWidth() }, destroyed() { window.removeEventListener("resize", this.screenWidth); }, methods: { screenWidth() { this.sWidth = this.$refs.container?.offsetWidth; }, }, }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" ref="container"> screen {{ sWidth }} </div>