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 one called thumb. Those indexes hold arrays.

I'm developing in vue 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.

Hover over that blue `i` symbol - it says something about the values being reinterpreted when you expand the object. The elements must be being added to the arrays after you've done a `console.log`, and presumably after vue has attempted to use them in whatever way it's trying to. — James Thorpe, Sep 08 '15 at 14:39
I edited my comment and showed my HTML. I'm doing a console.log inside the ready method of the Slider component which the element should already be appended to the DOM. This was working before I switched from Browserify to Webpack which doesn't make any sense.. — HaleyBuggs, Sep 08 '15 at 14:44
Possibly a timing issue? Have you tried `setTimeout` like so: `setTimeout(function(){ console.log(this.$.slide.length); }, 1000)` — Kevin Jantzer, Sep 08 '15 at 14:48
Kevin, that works, but that looks really silly to have to do that everywhere. Because what if they're computer connection is slow and it takes more than just 1 second to load everything? I can't always tell how fast their computer speed will be.. — HaleyBuggs, Sep 08 '15 at 14:50
Plus now it jumps like crazy on page load.. The div that is getting the width set is the default 500 pixels and then it jumps to the correct width.. but you can see it on every page load no matter how fast your computer is. This won't be accepted :/ Hmm.. — HaleyBuggs, Sep 08 '15 at 14:51
@HaleyBuggs, oh yeah, definitely not a solution, just confirming the issue. What plugin are you using? and what are you trying to do after it loads? Can you setup a [jsfiddle](http://jsfiddle.net)? — Kevin Jantzer, Sep 08 '15 at 14:52
http://jsfiddle.net/5g9Ldc9e/ this is the fiddle. Notice how the slides are jumping because they are loading at their default width (500px) and then jumping to the width that the javascript sets it to in the ready method of the main component. The only component that needs looked into is the Slider component (you can ignore the slide and thumb ones since it's a lot of code). It's in the ready method. The main vue instance calls updateDimensions() on the parent (slider component).. and that's where everything is messing up. — HaleyBuggs, Sep 08 '15 at 15:13

Kevin Jantzer · Accepted Answer · 2015-09-08T15:47:50.760

13

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

edited Sep 08 '15 at 15:47

answered Sep 08 '15 at 14:56

Kevin Jantzer

9,215
2
28
52

jsfiddle.net/5g9Ldc9e this is the fiddle. Notice how the slides are jumping because they are loading at their default width (500px) and then jumping to the width that the javascript sets it to in the ready method of the main component. The only component that needs looked into is the Slider component (you can ignore the slide and thumb ones since it's a lot of code). It's in the ready method. The main vue instance calls updateDimensions() on the parent (slider component).. and that's where everything is messing up – HaleyBuggs Sep 08 '15 at 15:14
Thank you. It means, that console.log works quite confusing then. Can it be solved also on side of this method, so console.log will show only information from time it is called, not from time it is inspected in console? – tomas.teicher May 15 '17 at 09:04
@tomas.teicher - I would suggest [using breakpoints](http://i.imgur.com/hq4lWZx.png) to freeze your code which will let you debug your code without that timing issue – Kevin Jantzer May 15 '17 at 16:04

Array shows 0 as length when it has elements in it

1 Answers1

Update

Updated jsFiddle

Linked

Related