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示意不同的对象。