Array shows 0 as length when it has elements in it

Question

So I have an object like so:

this.$ - this holds indexes that hold arrays. For instance, it has two different indexes: one called slide and

Answer 1

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