问题描述 ：在面加载完之后从后台获取用户列表，发现axios数据可以获取，但是页面还是空白
代码
解决如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,i) in list" :key="user.userId">
<td>{{ user.userId }}</td>
<td v-text="user.username"></td>
<td>{{ user.email }}</td>
<td>{{ user.mobile }}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [ ]
},
methods: {
queryList(){
let _list = this.list;
axios.get('http://localhost:8099/test/pageList')
.then(function (response) {
let result = response.data.data.page.records;
result.forEach(user=>{
_list.push(user);
})
//this.list = result;
//console.log(result);
})
.catch(function (error) {
console.log(error);
});
this.list = _list;
},
},
created (){
this.queryList();
},
});
</script>
</body>
</html>
页面效果就不上了
2.阐述解决思路
1.要想页面加载完加载数据必须在适当的钩子函数里面加载，我用了created 函数
2.axios获取数据的里面直接用forEach的使用this.list的push方法会，报错push没有定义，
打印this之后发现this和vue的this并不一样，故此提前将vue的this提取出来
3.完
一个后端的vue之旅，如果有其他的处理方式可以与楼主分享
本文为原创文章，转载请注明出处。欢饮讨论
楼主邮箱 [email protected]
qq 2519946973
参考文章
1.vue钩子函数
2.axios发送请求demo
