javascript 当数组中有元素时，数组显示 0 作为长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32460602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Array shows 0 as length when it has elements in it
提问by HaleyBuggs
So I have an object like so:
所以我有一个像这样的对象：
this.$- this holds indexes that hold arrays. For instance, it has two different indexes: one called slideand one called thumb. Those indexes hold arrays.
this.$- 这包含保存数组的索引。例如，它有两种不同的索引：一种称为slide，一种称为thumb。这些索引保存数组。
I'm developing in vue and got those to show up with the v-refattribute. However, whenever I do this:
我正在 vue 中开发，并让它们与v-ref属性一起显示。但是，每当我这样做时：
console.log(this.$.slide.length)
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.
它返回 0。我正在尝试使用forEach()但不能循环遍历它，因为它显示 0，即使该数组中显然有 4 个 VueComponent 对象。
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.
我不太明白为什么它说幻灯片：数组 [0]，但随后在下一行显示幻灯片：数组 [4]。我试着进去this.$.slide.slide，但那是未定义的。
Thanks for any insight.
感谢您的任何见解。
EDIT:
编辑：
This is my HTML for Vue:
这是我的 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>
The v-refs are already there so it should show them...
v-refs 已经在那里，所以它应该显示它们......
I'm console.log() all of this inside the readymethod inside Vue.
我是readyVue内部方法中的console.log() 所有这些。
回答by Kevin Jantzer
This is a timing issue. The first time you ask for the lengthit 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.
这是一个时间问题。您第一次要求length它确实是0，但是当您几秒钟后使用 Chrome Dev Tools 检查对象时，您正在检查现在已填充的活动对象。
You can confirm this by using setTimeout
您可以通过使用确认这一点 setTimeout
setTimeout(function(){
console.log(this.$.slide.length);
}, 1000)
Sounds like the readyevent isn't working the way you expected.
听起来ready事件不像您预期的那样工作。
Update
更新
To solve your problem of setting with photo widths without glitching, you can use setTimeout 0to defer the execution. JS is single threaded and this will let the rendering finish before setting the width
为您解决无毛刺有照片的宽度设置的问题，您可以使用setTimeout 0来推迟执行。JS 是单线程的，这会让渲染在设置宽度之前完成
// `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.
有些人不赞成这样做，因为这可能是逻辑错误的标志，但如果不了解 Vue.js 的工作原理，我会说这将是您目前最好的解决方案。
