[JavaScript知识库] vue使用v-for为列表每一项动态添加ref

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue使用v-for为列表每一项动态添加ref -> 正文阅读

[JavaScript知识库]vue使用v-for为列表每一项动态添加ref

有这样一个需求:

因为list列表可能每一项的高度都不一样，要实现左侧步骤条动态高度，需要获取列表每一项的具体高度。所以想到给list每一项添加一个 ref，从而获取每一项的高度。

1、使用index给每一项添加 ref ,:ref="`line_item${index}`" ,这样每一项都会有一个不同的 ref,line_item0、line_item1...

 <div class="line_item" :ref="`line_item${index}`" v-for="(item, index) in lineTimeList" :key="index">
</div>

2、通过for循环获取每一项的高度

initLineHeight(){
      this.lineHeight = 0
      if(this.lineTimeList.length>1){
        this.lineTimeList.forEach((item,index) => {
          if(index<this.lineTimeList.length-1){
            // 不要最后一个li
            this.lineHeight+=this.$refs[`line_item${index}`][0].offsetHeight
          }
        });
      }
    },

注意：this.$refs[`line_item${index}`] 返回的是一个数组，所以需要this.$refs[`line_item${index}`][0]获取第一项就可以