el-dialog 弹窗获取里面子组件

Question

视频弹窗，如果放在外层就正常可以调用，

但是如果加一层el-dialog 那么就获取不到这个id,回调函数里面输出的$ref里面有东西

但是this.$ref.myPlayer1 返回undefined.

<el-dialog title="视频" v-model="playFormVisible" :close-on-click-modal="false" @open='show()'>

        <video id="myPlayer1" poster="" controls playsInline webkit-playsinline autoplay ref="myPlayer1">
            <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b" type="rtmp/flv" />
            <source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" type="application/x-mpegURL" />
        </video>
    </el-dialog>

如果想让这个也正常，应该怎么写，或者怎么获取?

Answer 1

video 其实是装在 el-dialog 的 slot 中的，页面进来的时候，dialog 尚未挂载，当然拿到不 video 元素了。

应该在 dialog 挂载后再获取 video 元素。

show () {
   this.playFormVisible = true
   this.$nextTick(() => console.log(this.$refs.myPlayer1))

}

关于 nextTick，可以看看文档： https://cn.vuejs.org/v2/api/#Vue-nextTick

Answer 2

v-model是什么鬼，换成:visible.sync照官网的来，
然后在mounted里面取$ref试试