美文网首页
vue中的ref在遍历中调用子组件方法报错

vue中的ref在遍历中调用子组件方法报错

作者: 空我我 | 来源:发表于2021-09-03 10:49 被阅读0次

vue中的ref在遍历中调用子组件方法报错,如下


微信截图_20210903104459.png

是因为当 ref 和 v-for 一起使用的时候,得到的 ref 是一个包含了对应数据源的这些子组件的数组。
导致找不到这个报错。
正确应该是在方法调用的时候加上索引

<view class="w-94 m2-auto"  v-for="(item,index) in fileList" :key="index">
    <l-file ref="lFile" :logo="logo" ></l-file>
    <view class="flex-around mt2">
        <u-button @tap="onOpenDoc(item.url,index)">
            <text class="iconfont icon-yulan font48"></text>预览
        </u-button>
    
    
    </view>
</view>
onOpenDoc(attachUrl, index) {
    let url = attachUrl
    this.$refs.lFile[index].download({
            url
        })
        .then(path => {
            /* 预览 */
            this.$refs.lFile[index].open(path);
        });
},

相关文章

网友评论

      本文标题:vue中的ref在遍历中调用子组件方法报错

      本文链接:https://www.haomeiwen.com/subject/adzhwltx.html