En una aplicación Vue.js, obtuve un producto basado en la identificación de ruta proporcionada.

El objeto del producto en una matriz tiene imágenes. Quiero crear una copia de los datos reactivos "mosaicImagesList" que se refleja una vez que se recupera el producto, y debe tener la siguiente estructura:

 [ { "url": "https://via.placeholder.com/650x250", "isWide": true, "isTall": false }, { "url": "https://via.placeholder.com/350x150", "isWide": true, "isTall": false } ]

Muestra una salida en console.log , pero muestra una lista vacía de matriz en la página representada.

Aquí está mi código:

 export default { name: 'products.show', data () { return { slide: 0 } }, computed: { product () { return this.$store.state.product }, images () { const items = this.product.picture || [] const result = [] items.forEach(image => { const img = new Image() img.addEventListener('load', function () { const isWide = img.width > img.height const isTall = img.height > img.width result.push({ url: image, isWide, isTall }) }) img.src = image }) console.log(result) // <--- THIS WORKS IN THE CONSOLE LOG DEV TOOL return result } }, methods: { async fetchProduct () { await this.$store.dispatch('products/getById', this.$route.params.id) } }, async created () { await this.fetchProduct() } }

Aquí está la sección HTML:

 <div class="image-mosaic"> <div v-for="(image, index) in images" :key="index" :style="`background-image: url('${image.url}')`" class="card" /> </div>