javascript - 当数组中有元素时，数组显示 0 作为长度

Question

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

this.$ - 这包含包含数组的索引。例如，它有两种不同的索引:一种称为slide，另一种称为thumb。这些索引包含数组。

我在 vue 中进行开发，并让它们显示为 v-ref 属性。但是，每当我这样做时:

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

它返回为 0。我正在尝试使用 forEach() 遍历它，但不能因为它显示 0，即使该数组中显然有 4 个 VueComponent 对象。

我不太明白为什么它说 slide: 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 已经存在所以它应该显示它们...

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

Answer 1

这是一个时间问题。第一次请求 length 时，它确实是 0，但是当您几秒钟后使用 Chrome Dev Tools 检查对象时，您正在检查现在具有的事件对象已满。

您可以使用 setTimeout 确认这一点

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

听起来 ready 事件没有按您预期的方式工作。

更新

要解决您设置照片宽度而不会出现故障的问题，您可以使用 setTimeout 0 到 defer the execution . JS是单线程的，这会在设置宽度之前让渲染完成

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

有些人不赞成这样做，因为这可能是逻辑错误的迹象，但如果不了解 Vue.js 的工作原理，我会说这是目前最好的解决方案。

Updated jsFiddle