自定义组件的v-for中,绑定refs属性,获取不到对应的元素

Taeyss
  • 180

在scroller中,使用了自定义的子组件,但是在绑定了动态的refs属性后,获取不到对应的元素,下面是我的模板代码。

<template>
    <div>
        <scroller class="scroller" scroll-direction="horizontal" show-Scrollbar="false" @didEndScrolling="ondidEndScrolling">
            <div class="scroller wraper" ref="wraper" :style="{width: scrollerSize}">
                <specialgoodsitem class="specialgoodsitem" :ref="'item'+index" v-for="(item, index) in datas" :key="item.id" :item="item"></specialgoodsitem>
            </div>
        </scroller>
    </div>
</template>

其中,specialgoodsitem是我自定义的组件,scroller我加了一个自定义的滑动事件,在scroller停止滑动时触发,现在,在ondidEndScrolling这个方法里,我使用const el = this.$refs.item5,获取不到对应的子组件,应该怎么写才能获取?而且,如果我直接把specialgoodsitem换成div,就能正确获取。

回复
阅读 14.3k
5 个回答

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
链接描述

console.log(this.refs)可以看到打印出来的 v-for里面的ref和外面的不一样,外面的是dom节点,里面的是一个数组

解决办法:
this.$refs.item5 => this.$refs.item5[0]
即可!!!

为什么不通过this.$children 获取呢...

我之前也遇到this.$refs的问题
这个必须要绘制出来之后才会有值,你检查一下你是不是在绘制之前就调用了,所以取不到

this.$refs.priDataForm[i]
为什么这样写都报错。。。。。。。。。。。
直接写死0 或者1就正常  这是什么鬼
你知道吗?

宣传栏