vue页面应用addEventListener,对页面元素增加事件监听,在addEventListener办法外部无奈获取data定义的变量值。
编写 videoList.vue 页面,页面代码如下所示。
<template> <div class="container"> <div class="video-list"> <div class="remote-video"> <div class="remote-video-item" v-for="pull in pullStreamList"> <video controls="controls" controlslist="nodownload" :disablePictureInPicture="true" autoplay="autoplay" :id="`remote-video-${pull.id}`"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video> </div> </div> </div> </div></template><script> export default { name: "test", data(){ return{ pullStreamList:[], } }, mounted:function () { let _this = this; _this.pullStreamList.push({"id":"00001","name":"test00001"}); let timer = setInterval(function () { _this.removeRemoteVideo('00001'); clearInterval(timer) },10) }, methods:{ removeRemoteVideo:function (pullId) { let newRemoteVideo = document.getElementById("remote-video-" + pullId); console.log("newRemoteVideo",newRemoteVideo); console.log(" _this.pullStreamList before", this.pullStreamList); newRemoteVideo.addEventListener("play",function () { console.log(" _this.pullStreamList after", this.pullStreamList); }) } } }</script>
页面输入_this.intervalList after的值是为undefinded,然而在_this.intervalList before输入的变量的确有内容的,两个this示意不同的对象。