Array shows 0 as length when it has elements in it Array shows 0 as length when it has elements in it vue.js vue.js

Array shows 0 as length when it has elements in it


This is a timing issue. The first time you ask for the length it is indeed 0, but when you inspect the object a few seconds later with Chrome Dev Tools you are inspecting the live object which has now been filled.

You can confirm this by using setTimeout

setTimeout(function(){    console.log(this.$.slide.length);}, 1000)

Sounds like the ready event isn't working the way you expected.

Update

To solve your problem of setting with photo widths without glitching, you can use setTimeout 0 to defer the execution. JS is single threaded and this will let the rendering finish before setting the width

// `0` will 'defer'setTimeout(this.setSlideDimensions.bind(this), 0);setTimeout(this.setThumbDimensions.bind(this), 0);

Some people frown upon doing this as it can be a sign of bad logic, but without more knowledge of how Vue.js works, I would say this would be your best solution for now.

Updated jsFiddle