Javascript 使用vuejs渲染视频对象

我正在尝试使用vuejs渲染videoList数组中的视频对象。视频正在阵列内部推送，但视图仅输出“[object HTMLVideoElement]”。如何让vue渲染视频

<div v-for="(video,index) in videoList" :key="index">
    {{video}}
</div>

export default {
data(){
    return{
        videoList:[]
    }
},
methods:{
    connectToNewUser(userId, stream) {
        const call = myPeer.call(userId, stream)
        const video = document.createElement('video')
        call.on('stream', userVideoStream => {
            this.addVideoStream(video, userVideoStream)
        })
    },
    addVideoStream(video, stream) {
        video.srcObject = stream
        video.addEventListener('loadedmetadata', () => {
            video.play()
        })
        this.videoList.push(video)
    }
 },
}

{{video}}
导出默认值{
数据（）{
返回{
视频列表：[]
}
},
方法：{
connectToNewUser（用户ID，流）{
const call=myPeer.call（userId，stream）
const video=document.createElement（'video'）
call.on（'stream'，userVideoStream=>{
this.addVideoStream（视频，用户视频流）
})
},
添加视频流（视频，流）{
video.src对象=流
video.addEventListener（'loadedmetadata'，（）=>{
视频播放（）
})
此.videoList.push（视频）
}
},
}

符号

{{}

接受您放入的任何内容，将其作为JavaScript表达式计算，并将结果显示为字符串

这意味着，如果您在控制器中创建

元素并将它们放置在胡须之间的模板中，您将得到：

[object HTMLVideoElement]

首先，您不应该在控制器内创建DOM元素。让Vue为您渲染并通过使用创建的DOM元素

在我提供一个实际的例子之前，您需要更新您的问题，了解触发

元素生成的更多信息。理想情况下，您应该将其转换为可运行的代码段

原则上，您的

videoList

应该是一个对象数组，其中包含

元素运行所需的数据（而不是实际的DOM

元素）。将一个这样的对象推送到阵列后，如果您使用以下内容，Vue将为其呈现一个

标记：

<video v-for="(video,index) in videoList" :key="index" ref="videos" />

如果它不起作用，您可能希望提供一个最小的可运行示例，这样我就可以亲自测试它，看看有什么问题

methods: {
  connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream);
    call.on('stream', uStream => this.addVideoStream(uStream));
  },
  addVideoStream(stream) {
    this.videoList.push({});
    this.$nextTick().then(() => {
      const video = this.$refs.videos[this.videoList.length - 1];
      if (!video) return;
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      })
    })
  }
}