# [Vue.js] Array shows 0 as length when it has elements in it

So there is an object like so:

this.$- this holds indexes that hold arrays. For instance, it has two different indexes: one called slide and one called thumb. Those indexes hold arrays. I’m developing in vue.js and got those to show up with the v-ref attribute. However, whenever I do this: console.log(this.$.slide.length)

It comes back as 0. I’m trying to loop through it using forEach() but can’t since it shows 0 even though there are clearly 4 VueComponent objects inside that array.

I’m not really understanding why it says slide: array[0], but then shows slide: array[4] on the next line. I tried going in this.$.slide.slide, but that’s undefined. Thanks for any insight. EDIT: This is my HTML for Vue: <slider inline-template img-count=”4” v-ref=”slider”> <div class=”slides” v-style=”styles”> <sliderslide v-repeat=”count” v-ref=”slide”> <img src=”{ gallery_image(‘HM722_Silver_Creek_9978.jpg’, ‘full’) }” alt=”HM722 Silver Creek” style=”margin-top:-15%;” /> </sliderslide> </div> <div class=”thumbnails”> <div class=”thumbnail-wrapper”> <sliderthumb v-repeat=”count” send-index=”@{ updateIndex }” v-ref=”thumb” image-src=”{ gallery_image(‘HM722_Silver_Creek_9978.jpg’) }” image-alt=”” caption=”Newest Product”> </sliderthumb> </div> </div> </slider> The v-refs are already there so it should show them… I’m console.log() all of this inside the ready method inside Vue. ### Solution : 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 the 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 the best solution for now.

Updated jsFiddle