vue中用axios调接口拿到值,值变了,但是页面是死活变不过来
就是调了一个接口,拿了一个值,但是页面上这个值死活不更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人团队业绩详情</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style scoped>
#app{padding:.5rem;}
*{font-size: 1rem;}
.PTI_title{line-height: 4rem;text-align: center;border-bottom: 1px solid #E6E6E6;}
</style>
</head>
<body>
<div id="app">
<div class="PTI_title">{{price1}}</div>
</div>
<script>
var vm=new Vue({
el: '#app',
data(){
return{
listQuery:{},
price1:0,
}
},
methods: {
getData(){
this.listQuery.userId=6935;
axios.get('xxxxxxxxxxxxx', {
params: {
userId: this.listQuery.userId
},
})
.then(function (response) {
if(response.data.code===0){
this.price1=response.data.data.price1;
console.log(this.price1)
}
})
.catch(function (error) {
});
}
},
created(){
this.getData()
}
})
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
把你then后面这部分改成箭头函数
.then(function (response) {
===>
.then(response => {
把 this.getData()放到mounted中执行