鍍金池/ 問答/Python  HTML/ el-dialog 彈窗獲取里面子組件

el-dialog 彈窗獲取里面子組件

視頻彈窗，如果放在外層就正?？梢哉{(diào)用，

clipboard.png

clipboard.png

但是如果加一層el-dialog 那么就獲取不到這個(gè)id,回調(diào)函數(shù)里面輸出的$ref里面有東西

clipboard.png

但是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>

如果想讓這個(gè)也正常，應(yīng)該怎么寫，或者怎么獲取?

回答
編輯回答
巫婆

v-model是什么鬼，換成:visible.sync照官網(wǎng)的來，
然后在mounted里面取$ref試試

2017年5月23日 01:39
編輯回答
背叛者

video 其實(shí)是裝在 el-dialog 的 slot 中的，頁面進(jìn)來的時(shí)候，dialog 尚未掛載，當(dāng)然拿到不 video 元素了。

應(yīng)該在 dialog 掛載后再獲取 video 元素。

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

}

關(guān)于 nextTick，可以看看文檔： https://cn.vuejs.org/v2/api/#Vue-nextTick

2017年8月14日 19:41