当数组中包含元素时,数组显示0作为长度

Question

所以我有一个像这样的对象:

this.$ - 这包含保存数组的索引.例如,它有两个不同的索引:一个叫做slide,一个叫做thumb.这些索引包含数组.

我正在开发vue并让那些显示v-ref属性.但是,每当我这样做:

console.log(this.$.slide.length)

它回来为0.我试图循环使用forEach()但不能,因为它显示0,即使该数组中有明显4个VueComponent对象.

我真的不明白它为什么说幻灯片:array [0],但是接着在下一行显示slide:array [4].我试过进去this.$.slide.slide,但那是不确定的.

感谢您的任何见解.

编辑:

这是我的Vue HTML:

<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>

v-refs已经存在,所以应该向他们展示......

我是ready在Vue 内部的方法中的所有这些的console.log().

Answer 1

这是一个时间问题.第一次你要求length它确实如此0,但是几秒钟后你用Chrome Dev Tools检查对象时,你正在检查现在已经填充的活动对象.

您可以使用确认 setTimeout

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

听起来ready事件没有按照您的预期运作.

更新

为您解决无毛刺有照片的宽度设置的问题,您可以使用setTimeout 0来推迟执行.JS是单线程的,这将在设置宽度之前完成渲染

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

有些人不喜欢这样做,因为它可能是逻辑错误的标志,但是如果不了解Vue.js如何工作,我会说这将是你现在最好的解决方案.

更新了jsFiddle