数组显示长度为0，即使它包含元素

Question

数组显示长度为0，即使它包含元素

javascriptforeachvue.js

4

我有一个这样的对象：

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>

已经存在，因此应该显示它们...

我在Vue的ready方法中使用console.log()打印所有内容。

- HaleyBuggs

2

将鼠标悬停在蓝色的“i”符号上 - 它会显示在展开对象时重新解释值的内容。元素必须在您执行了console.log之后以及Vue尝试以其正在尝试的任何方式使用它们之后添加到数组中。 - James Thorpe

console.log(this.$.slide) 显示什么？ - Tro

Kevin，这个方法可行，但是到处都这样做看起来很傻。因为如果他们的计算机连接速度慢，需要加载所有内容超过1秒钟怎么办？我无法总是知道他们的计算机速度有多快... - HaleyBuggs

现在它在页面加载时像疯了一样跳动。被设置宽度的 div 是默认的 500 像素，然后跳到正确的宽度..但是你可以在每次页面加载时看到它，无论你的电脑有多快。这是不能被接受的 :/ 嗯.. - HaleyBuggs

@HaleyBuggs，噢，是的，绝对不是一个解决方案，只是确认这个问题。你使用了什么插件？加载后你想做什么？你可以设置一个 jsfiddle 吗？ - Kevin Jantzer

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Jantzer · Accepted Answer

这是一个时间问题。当你第一次请求 length 时，它确实是 0，但是当你几秒钟后使用 Chrome Dev Tools 检查对象时，你检查的是已经填充的实时对象。

你可以使用 setTimeout 来确认这一点。

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

听起来像是ready事件没有按照您的预期工作。

更新

为了解决设置图片宽度而不出现故障的问题，您可以使用setTimeout 0来延迟执行。JS是单线程的，这样会让渲染完成后再设置宽度。

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

有些人认为这样做可能是糟糕逻辑的迹象，但如果没有更多了解Vue.js如何工作，我会说这是目前最好的解决方案。

数组显示长度为0，即使它包含元素

更新

更新的jsFiddle