在Vue JS中更新数据数组

时间:2016-11-27 18:57:07

标签: vue.js laravel-5.3 vue-resource

我正在尝试在VueJS 2.0中创建一个小DataTable,并且我遇到了一些障碍,我正在调用后端路由从数据库中的记录中获取一些JSON,到目前为止好。

我希望这些记录填充一个GridData数组,我将稍后迭代并显示在我的表上。 这里的问题是它不起作用......

Vue.http.post('/getData', data).then((response) => {
    this.gridData = response.body;
});

我的数据设置如下

    data: () => {
        return {
            searchQuery: "",
            columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Successes', 'Failures', 'Last Ran'],
            lastId: 0,
            rowsPerPage: 10,
            gridData: []
        }
    }

我在挂载挂钩

上调用获取数据的函数
    mounted() {
        this.fetchData(this.lastId, this.rowsPerPage);
    },

我在这里做错了吗?

1 个答案:

答案 0 :(得分:0)

您正在使用POST HTTP请求,而不是GET.POST用于在API / DB中创建新记录。

我认为这应该对你有用

data() {
        return {
            searchQuery: "",
            columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Successes', 'Failures', 'Last Ran'],
            lastId: 0,
            rowsPerPage: 10,
            gridData: []
        }
},

created() {
  this.fetchData()
},

methods: {
  fetchData() {
   this.$http.get('/getData')
     .then(result => {
       this.gridData = result.data
       // or this.gridData = result.json()
     })
  }
}