数组中包含元素时，数组显示为0 [英] Array shows 0 as length when it has elements in it

问题描述

所以我有这样一个对象：
$ b $ this。$ - 这个包含索引的数组。例如，它有两个不同的索引：一个叫 slide ，另一个叫 thumb 。这些索引保存数组。

我是在vue中开发并得到那些与 v-ref 属性。然而，每当我这样做：
$ b $ console.log（this。$。slide.length）

它回来为0.我试图循环使用 forEach（）但不能显示，因为它显示0，即使数组中有4个VueComponent对象。

我不是很明白为什么说slide：array [0]，但显示slide：array [4]在下一行。我尝试了 this。$。slide.slide ，但是这个没有定义。

感谢您的任何见解。 / b>

编辑：

这是我的Vue HTML：

 < slider inline-template img-count =4v-ref =slider> 
< div class =slidesv-style =styles> 
< sliderslide v-repeat =countv-ref =slide> 
< img src ={{gallery_image（'HM722_Silver_Creek_9978.jpg'，'full'）}}alt =HM722 Silver Creekstyle =margin-top：-15％; /> 
< / sliderslide> 
< / div> 
 
< div class =thumbnails> 
< div class =thumbnail-wrapper> 
  image-src ={{gallery_image（'HM722_Silver_Creek_9978.jpg '）}}
 image-alt =
 caption =最新的产品> 
< / sliderthumb> 
< / div> 
< / div> 
< /滑块> 
  

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

我是console.log（），所有这些都在Vue中的 ready 方法中。


解决方案

这是一个计时问题。你第一次要求长度的确是 0 ，但是当你几秒钟后检查对象Chrome开发工具，您正在检查现已被填充的活动对象。



您可以使用 setTimeout

$ p $ setTimeout（function（）{
console.log（this。$。slide.length）;
），1000）


听起来像 ready
$ b

更新

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

  //`0`将'defer'
 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屋！