vue中调用方法时,获取组件data中的变量为undefined,解决:this指向问题
今天为大伙分享,在平时工作中遇见的问题及解决方法。今天主要分享的内容主要是在不同作用域中this指向的问题。不多说直接贴代码;错误示例:<template><div class="test"><button @click="getList()">请求数据</button><button @click="show()...
·
今天为大伙分享,在平时工作中遇见的问题及解决方法。今天主要分享的内容主要是在不同作用域中this指向的问题。不多说直接贴代码;
错误示例:
<template>
<div class="test">
<button @click="getList()">请求数据</button>
<button @click="show()">点击</button>
<div id="login_container"></div>
<!-- <div>
<button @click="requestFullScreen()">进入全屏</button>
<button @click='exitFullScreen()'>退出全屏</button>
</div> -->
<div class="baiduMap">
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"></baidu-map>
</div>
</div>
</template>
<script>
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(){}
}
</script>
<style scoped lang="scss">
.map {
width: 100%;
height: 400px;
}
</style>
解决示例:
<template>
<div class="test">
<button @click="getList()">请求数据</button>
<button @click="show()">点击</button>
<div id="login_container"></div>
<!-- <div>
<button @click="requestFullScreen()">进入全屏</button>
<button @click='exitFullScreen()'>退出全屏</button>
</div> -->
<div class="baiduMap">
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"></baidu-map>
</div>
</div>
</template>
<script>
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(){}
}
</script>
<style scoped lang="scss">
.map {
width: 100%;
height: 400px;
}
</style>
解释:this在不同作用域,所指向的变量的指针地址时不同的。
补充:如果在使用闭包时,有多层级包裹的函数,最里面的一层函数引用第二层的变量,也是用这种方法来解决的!
更多推荐
已为社区贡献2条内容
所有评论(0)