使用HTTP请求结果处理VUE网格

Question

这是VUE网格示例：

    var demo = new Vue({
        el: '#demo',
        data: {
            searchQuery: '',
            gridColumns: ['name', 'power'],
            gridData: [
                { name: 'Chuck Norris', power: Infinity },
                { name: 'Bruce Lee', power: 9000 },
                { name: 'Jackie Chan', power: 7000 },
                { name: 'Jet Li', power: 8000 }
            ]
        }
    });

这是一个返回数据中的项目

的请求

    demo.$http.get('http://localhost:8001/people')
        .then(response => {
            console.log(response.body);
        }, response => {
            console.log('something went wrong');
        });

这样：

{
 data: [
  {
   name: "Simone",
   power: "Infinity"
  },
  {
   name: "Chuck",
   power: "Simonity"
  }
 ]
}

如何将响应放在Griddata中？

Answer 1

尝试使用gridData数组的push（）方法：

demo.$http.get('http://localhost:8001/people')
    .then(response => {
        for (let i in response.data)
            demo.gridData.push(response.data[i]);
    }, response => {
        console.log('something went wrong');
    });