当数组中有元素时，数组显示 0 作为长度 [英] Array shows 0 as length when it has elements in it

问题描述

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

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:

<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 class="缩略图"><div class="thumbnail-wrapper"><sliderhumb v-repeat="count" send-index="@{{ updateIndex }}" v-ref="thumb"image-src="{{ gallery_image('HM722_Silver_Creek_9978.jpg') }}"图像 alt=""标题=最新产品"></sliderthumb>

</滑块>

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

我在 Vue 中的 ready 方法中使用了 console.log().

解决方案

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

您可以使用 setTimeout

确认这一点

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

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

更新

为了解决您设置照片宽度而没有毛刺的问题，您可以使用 setTimeout 0 到 推迟执行.JS 是单线程的，这会让渲染在设置宽度之前完成

//`0` 将延迟"setTimeout(this.setSlideDimensions.bind(this), 0);setTimeout(this.setThumbDimensions.bind(this), 0);

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

更新 jsFiddle

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.

解决方案

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

这篇关于当数组中有元素时，数组显示 0 作为长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！