akino's Blog
GitHub (opens new window)

uniapp获取不到video组件ref问题

akino ... 2022-09-02 09:31 Uniapp
  • Uniapp
  • 前端
 小于 1 分钟

# 起因

在编写video-swiper的nvue组件时，通过v-for渲染swiper-item，然后发现无论怎样通过uni.createVideoContext(id, thisArg)和this.$refs[refName]都获取不到可控制视频的对象。

<swiper-item v-for="(video, i) in videoList">
    <video :id="'video' + i" ref="'video' + i" :src="video" />
</swiper-item>
1
2
3

# 解决历程

实验了一下把视频放到一级页面都是正常的，但是在nvue子组件中就是不行，很自然地以为是nvue子组件的限制，然后无意间把渲染方式改了一下，结果就一切正常了！！

<swiper>
      <swiper-item>
          <video id="video0" ref="video0" :src="videoList[0]" />
      </swiper-item>
      <swiper-item>
          <video id="video1" ref="video1" :src="videoList[1]" />
      </swiper-item>
      <swiper-item>
          <video id="video2" ref="video2" :src="videoList[2]" />
      </swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11

那么真相只有一个），v-for的问题，目前还没深究其背后原因，之后在更新~