vue遍历过程中获取元素

在开发时遇到需要遍历设备集合，并且一个集合对应一个视频元素(video)的问题

这里主要展示vue遍历过程中如何取出元素的方法以及一些坑

首先是循环

    <el-row style="margin-bottom: 10px;">
      <template v-for="(item, index) in equipmentTempList">
        <el-col :xs="24" :sm="24" :md="12" :lg="4">
          <el-card class="update-log">
            <el-row style="text-align: center; margin-bottom: 40px">实时温度信息</el-row>
            <el-row style="height: 48px;">
              <el-col><span>当前相机精确位置:{{ item.groupName }}</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>当前外表最低温度:{{ item.tempMin }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>当前外表最高温度:{{ item.tempMax }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>当前外表平均温度:{{ item.tempAvg }}℃</span></el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <div style="height: 296px; width: 489px">
            <video :ref="'videoRef_' + index" :id="'video_' + index" height="285" width="400" muted="muted"
                   autoplay="autoplay"></video>
          </div>
        </el-col>
      </template>
    </el-row>

绑定ref元素是为了获取video元素，并且由于是数组所以每一个video元素需要绑定给不同ref，总的来说如果你需要在组件的 JS 代码中操作 <video> 元素，可以使用 ref 属性，如果需要给 <video> 元素设置样式或者 JS 代码中无需操作该元素，可以使用 id 属性。

 然后是method

    async mwfs() {
        // Wfs 对象已经存在，可以进行后续操作
        if (Wfs.isSupported()) {
          // 循环遍历设备列表
          //发送请求获取当前设备列表
          this.equipmentList = await this.getEquipmentTemp()
          for (let i = 0; i < this.equipmentList.length; i++) {
            const item = this.equipmentList[i];
            // // 发送同步请求获取当前温度信息
            // const res = await EquipTemp(item);
            // this.equipmentTempList.push(res.data)
            // 使用异步操作加载视频源
            await new Promise(async resolve => { // 将 Promise 函数添加 async 关键字标识
              //保证获取最新的DOM元素
              this.$nextTick(() => {
                const videoRef = this.$refs[`videoRef_${i}`][0];
                console.log(videoRef)
                const wfs = new Wfs();
                wfs.attachMedia(videoRef, item.id);
                this.videos.push(wfs)
                wfs.on(Wfs.Events.MEDIA_ATTACHED, () => {
                  videoRef.play();
                  resolve();
                });
              });
            });
          }
      }
    },

在这段代码中，首先是for循环，为什么不采用foreach循环有以下原因

       ->首先就是先获取了设备列表然后采用了异步操作加载视频源可以避免阻塞主线程，提高页面响应速度，并且在加载多个视频时，异步操作可以同时进行，进一步提高效率。

       ->其次就是在foreach循环中无法等待异步操作完成再执行下一步循环的问题，因此容易出现数据错乱或者遗漏等问题。

       然后这里的this.$nextTick是为了保证我们的video元素已经是最新的才进行视频加载，获取元素的方法是通过this.$refs[`videoRef_${i}`][0]获取的，因为ref是可以绑定多个元素的，而我们是一个设备对应一个视频的，所以只需要取ref数组的第一个元素即可。

tips:只需要将元素打印出来，如果不是undefined是对应的元素即为获取到元素