vue.js axios 加载数据到table

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实例生命周期的内容请查看 链接，上面有详细的介绍。