1.后台数据加载到table
实现的功能为通过axios获得后台(webapi)数据,在通过vue.js渲染到table中。
1.代码
直接上代码,分为引用,js和html部分。1.1添加引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="~/Scripts/vue.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
axios的引用使用的是镜像,也可以引入本地文件。
1.2javascript
javascript部分分为以下几部分:
创建实例(详细了解参考链接):
var vm = new Vue({})
创建数据对象:
data: {}
在这里我们的数据对象为空的数组list:[]。
创建时执行方法:
mounted() {}
通过axios的get方法对数据对象赋值:
axios.get("~/api/projects/get?id=1")
.then(response => {
console.log(response);
var obj = JSON.parse(response.data);
//this.list = obj;
this.list = [obj];
//this.list.push(response.data);
console.log(this.list);
})
这里面需要注意的两个点是mounted的生命周期和mounted在整个实例中只执行一次。
var vm = new Vue({
el: '#appproject',
data: {
list: [],
MenuBody: '这里是菜单的内容'
},
mounted() {
axios.get("~/api/projects/get?id=1")
.then(response => {
console.log(response);
var obj = JSON.parse(response.data);
//this.list = obj;
this.list = [obj];
//this.list.push(response.data);
console.log(this.list);
})
}
});
1.3html
通过ID绑定vue实例:
<tbody id="appproject">
用v-for指令遍历数据对象:
<tr v-for="li in list">
<td>{{li.ProjectName}}</td>
<table class="metable" border="1">
<thead>
<tr>
<th>项目名称</th>
</tr>
</thead>
<tbody id="appproject">
<tr v-for="li in list">
<td>{{li.ProjectName}}</td>
</tr>
</tbody>
</table>
2.填坑部分
2.1获取数据但不能解析到table
在csdn上提问得到解决办法链接。产生的原因为把变量对象作为数组进行传值:
this.list = response.data;
改为:
var obj = JSON.parse(response.data);
this.list = [obj];
这里需要注意的是response.data得到的数据为字符串,需要通过JSON转换为json数据即可得到json数组。数组赋值需要使用中括号。
2.2mounted方法在整个实例中只执行一次
也就是说在html页面中mounted方法的得到的数据只能使用一次,关于vue实例生命周期的内容请查看
链接,上面有详细的介绍。