Vuejs多次显示包含Axios的组件
Vuejs多次显示包含Axios的组件
提问于 2018-06-27 06:46:03
我已经尝试了几个小时了，但是没有成功。我有两个组件。第一个组件是动态的，第二个组件只获取用户的地理位置。然后在第一个组件中显示地理位置。
我的问题是，我在页面上显示了几次第一个组件，每次显示它都会发出一个GET请求，效率很低。如果我显示该组件3次，它将发出3个GET请求。
重写这段代码的最佳方式是什么？
谢谢你的帮助
组件1：
<template>
<section id="under-info">
THe user is from <ip_info></ip_info>
</section>
</template>
<script>
export default {
}
</script>组件2：
<template>
<span id="user-city">
{{value}}
</span>
</template>
<script>
export default {
mounted: function () {
this.$nextTick(function () {
this.getIpInfo(this.param)
})
},
props:['param'],
data: function () {
return {
value:null
}
},
methods:{
getIpInfo(){
var vm = this
delete axios.defaults.headers.common["X-Requested-With"];
delete axios.defaults.headers.common["X-CSRF-TOKEN"];
axios
.get('http://api.ipstack.com/check?access_key=?',{
timeout: 1000
})
.then(function(response) {
vm.value = response.data['city]
})
}
},
}
</script>回答 1
Stack Overflow用户
发布于 2018-06-27 07:03:36
在要在组件中重用此值3倍的地方包装代码。
<template>
<div>
The user is from {{location}}, and {{location}} is a great place. They have a baseball team in {{location}}
</div>
</template>
<script>
export default {
mounted: function () {
this.$nextTick(function () {
if(this.needLocation){
this.getIpInfo(this.param)
}
})
},
props:['param', 'needLocation'],
data: function () {
return {
location:null
}
},
methods:{
getIpInfo(){
this.location = //results from your API call
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51052323
复制相关文章
相似问题
腾讯云开发者
