Laravel VueJS Axios將數組發送到控制器

Question

我有一個使用VueJS 2.0作爲前端的laravel 5.4應用程序。

我試圖將訪問者數組發佈到控制器上，但是當我從控制器返回數組時，數據不在那裏。

我無法看到我的生活我做錯了什麼？有趣的是，如果我發送兩個訪問者，我從控制器返回兩個空數組，所以訪問者的數量正在運行，它只是不捕獲數據。

我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; 
    } 

我的響應

{ 「訪客」：[[]，[]]}

Answer 1

visitor應一個物體，而不是一個陣列

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

---

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