php - Laravel VueJS Axios send array to controller -

i have laravel 5.4 application uses vuejs 2.0 front end.

i'm trying post visitors array controller after populating on page when return array controller data isn't there.

i can't see life of me i'm doing wrong? what's interesting if send 2 visitors through 2 empty arrays returning controller number of visitors working it's not capturing data.

my vue instance.

  <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> 

my html page

<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> 

i've got button actions storevisit() method.

<button class="button is-primary" @click="storevisit">save visit</button> 

my controller waiting post request

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

my response

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

visitor should object, not array

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

---

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