vue中调用方法时，获取组件data中的变量为undefined，解决：this指向问题

2024-06-06 06:18| 来源: 网络整理| 查看: 265

今天为大伙分享，在平时工作中遇见的问题及解决方法。今天主要分享的内容主要是在不同作用域中this指向的问题。不多说直接贴代码；错误示例：

请求数据点击 export default { name: 'Test', components: { }, data(){ return{ list:[], center: {lng: 0, lat: 0}, zoom: 100 } }, methods:{ getList:function(){ //axios this.$http.get("product/index").then( function(res){ console.log(this.list); //undefined this.list = res.data.result; //赋值不成功 } ).catch( function(err){ console.log(err); } ) }, //微信二维码 show:function(){ var obj = new WxLogin({ self_redirect:true, id:"login_container", appid: "申请成功的id", scope: "snsapi_login,snsapi_userinfo", redirect_uri: "重定向url", state: "vetwater", style: "", href: "" }); }, //地图 handler ({BMap, map}) { console.log(BMap, map) this.center.lng = 116.404 this.center.lat = 39.915 this.zoom = 15 }, //全屏，退出全屏 requestFullScreen: function(){ var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen() } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen() } else if (elem.msRequestFullscreen) { // elem.msRequestFullscreen() 没有指定元素 document.body.msRequestFullscreen() } }, exitFullScreen: function(element){ var doc = document.documentElement; if (doc.exitFullscreen) { doc.exitFullscreen() } else if (doc.mozCancelFullScreen) { doc.mozCancelFullScreen() } else if (doc.webkitCancelFullScreen) { doc.webkitCancelFullScreen() } else if (doc.msExitFullscreen) { document.msExitFullscreen() } }, }, mounted(){} } .map { width: 100%; height: 400px; }

解决示例：

请求数据点击 export default { name: 'Test', components: { }, data(){ return{ list:[], center: {lng: 0, lat: 0}, zoom: 100 } }, methods:{ getList:function(){ //axios var _this = this; console.log(111); this.$http.get("product/index").then( function(res){ console.log(_this.list); //[] _this.list = res.data.result; //赋值成功，this指向问题 } ).catch( function(err){ console.log(err); } ) }, //微信二维码 show:function(){ var obj = new WxLogin({ self_redirect:true, id:"login_container", appid: "申请成功的id", scope: "snsapi_login,snsapi_userinfo", redirect_uri: "重定向url", state: "vetwater", style: "", href: "" }); }, //地图 handler ({BMap, map}) { console.log(BMap, map) this.center.lng = 116.404 this.center.lat = 39.915 this.zoom = 15 }, //全屏，退出全屏 requestFullScreen: function(){ var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen() } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen() } else if (elem.msRequestFullscreen) { // elem.msRequestFullscreen() 没有指定元素 document.body.msRequestFullscreen() } }, exitFullScreen: function(element){ var doc = document.documentElement; if (doc.exitFullscreen) { doc.exitFullscreen() } else if (doc.mozCancelFullScreen) { doc.mozCancelFullScreen() } else if (doc.webkitCancelFullScreen) { doc.webkitCancelFullScreen() } else if (doc.msExitFullscreen) { document.msExitFullscreen() } }, }, mounted(){} } .map { width: 100%; height: 400px; }

解释：this在不同作用域，所指向的变量的指针地址时不同的。补充：如果在使用闭包时，有多层级包裹的函数，最里面的一层函数引用第二层的变量，也是用这种方法来解决的！

【本文地址】

公司简介

联系我们