在 Vue JS 中更新数据数组答案

【问题标题】：Updating an array of Data in Vue JS在 Vue JS 中更新数据数组
【发布时间】：2017-04-11 11:45:17
【问题描述】：

我正在尝试在 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 钩子上调用

    mounted() {
        this.fetchData(this.lastId, this.rowsPerPage);
    },

我在这里做错了吗？

【问题讨论】：

您的 fetchData 方法看起来如何？如果您想填充数据并将它们存储在数组中，为什么要使用 POST 请求？您应该使用 GET。

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

【解决方案1】：

您正在使用 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()
     })
  }
}

【讨论】：