Estoy tratando de obtener el ancho de la imagen dentro del bucle y dar una clase basada en el ancho. Mi intento fue usar una función getWidth que toma la fuente de la imagen, la carga y luego devuelve un ancho. Por alguna razón, el ancho es siempre una cadena vacía.

 <template> <div id="app"> <div v-for="image in images" :key="image"> width: {{ getWidth(image) }} <img :class="getWidth(image) > 450 ? 'large' : 'small'" :alt="image" :src="image" /> </div> </div> </template> <script> export default { name: 'App', data() { return { images: [ 'http://placeimg.com/640/480/business', 'https://vuejs.org/images/logo.png', ], }; }, methods: { getWidth(src) { let width; const image = new Image(); image.src = src; image.onload = function () { width = this.width; console.log(this.width); }; return width; }, }, }; </script>

¿Por qué esto no funcionaría? https://stackblitz.com/edit/vue3-app-bk8sef