当数组中有元素时，数组显示 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，但那是未定义的。

感谢您的任何见解。

编辑：

这是我的 HTML 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>

v-refs 已经存在，所以它应该显示它们...

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

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 的工作原理，我会说这将是您目前最好的解决方案。

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

Array shows 0 as length when it has elements in it

javascript

foreach

vue.js

更新

Updated jsFiddle