Berechnung Bildgrößen auf Last in Vue immer wiederkehr Null

Question

Ich muß die Summe der Breiten von einer Anzahl von Bildern berechnen, die von einem Vuex Array von Objekten geladen werden:

var activities = [ 
     { 
      id: 1, 
      imageUrl: '/static/images/activity1.jpg', 
     }, 
     { 
      id: 2, 
      imageUrl: '/static/images/activity2.jpg', 
     } 
    ] 

Allerdings sind die Größen immer Null , auch wenn ich es testen direkt in montiertem() -Methode:

mounted: function() { 
     console.log(document.getElementById('scroller-list').children[0].firstChild.offsetWidth) 
    }, 

gibt es eine Möglichkeit Vue zu zwingen, diese Größen zu holen, nachdem alles gemacht hat?

Answer 1

Ich habe einen ähnlichen Fall in meinem Code (ich hoffe, das kann Ihnen weiter helfen) In meinem Fall möchte ich die Größe einer Leinwand (die ein Bild enthält), bei montiert. Ich denke, der einzige Unterschied ist, dass Sie die Kinder überschleifen und die Breite summieren müssen.

methods: { 
    resizeCanvas() { 
     var ratio = Math.max(window.devicePixelRatio || 1, 1) 
     var canvas = document.querySelector('canvas') 
     if (canvas) { 
     canvas.width = canvas.offsetWidth * ratio 
     canvas.height = canvas.offsetHeight * ratio 
     canvas.getContext('2d').scale(ratio, ratio) 
     } 
    } 
    } 


mounted() { 
    const canvas = document.querySelector('canvas') 

    window.addEventListener('resize', this.resizeCanvas) 
    this.resizeCanvas() 
}