Laravel VueJS Axios 发送数组到控制器

Question

我有一个 laravel 5.4 应用程序，其前端使用 VueJS 2.0。

我试图在页面上填充后 post 访问者数组到控制器，但是当我 return 来自控制器的数组时，数据不存在。

我一辈子都看不出我做错了什么？有趣的是，如果我发送两个访问者，我从我的控制器中得到两个空数组 returning，所以访问者的数量正在工作，它只是没有捕获数据。

我的 vue 实例。

  <script>
    new Vue({

    el: '#app',

    data: {
        visitors: [],
        visitor: [],
    },

    methods: {
        addVisitor() {
            this.visitors.push(this.visitor);
            this.visitor = [];
        },

        storeVisit()
        {
          axios({
            method: 'post',
            url: '/visit/new',
            data: {
              visitors: this.visitors
            }
          });
        }
    },

});
  </script>

我的HTML页面

<p>Visitors</p>
    <div class="columns">
      <div class="column">
          <input class="input" placeholder="First Name" v-model="visitor.first">
      </div>
      <div class="column">
          <input class="input" placeholder="Last Name" v-model="visitor.last">
      </div>
      <div class="column">
          <input class="input" placeholder="Company" v-model="visitor.company">
      </div>
      <div class="column">
          <input class="input" placeholder="Email" v-model="visitor.email">
      </div>
      <div class="column">
          <button class="button is-primary" @click="addVisitor()">Add</button>
      </div>
    </div>

然后我有一个按钮可以操作 storeVisit() 方法。

<button class="button is-primary" @click="storeVisit">Save Visit</button>

我的控制器正在等待 post 请求

public function store(Request $request)
    {
        return $request->visitors;
    }

我的回复

{"visitors":[[],[]]}

Answer 1

visitor应该是对象，不是数组

data: {
    visitors: [],
    visitor: {}, // <- object here
},

addVisitor() {
    this.visitors.push(this.visitor);
    this.visitor = {}; // <- reset to an empty object
},

Laravel VueJS Axios 发送数组到控制器

Laravel VueJS Axios send array to controller

php

arrays

laravel

vue.js

axios