Laravel VueJS Axios send array to controller - php

Question

I have a laravel 5.4 application which uses VueJS 2.0 for the front end.
I'm trying to post the visitors array to the controller after populating on the page but when I return the array from the controller the data isn't there.
I can't see for the life of me what I'm doing wrong? What's interesting is if I send two visitors through I get two empty arrays returning from my controller so the number of visitors is working it's just not capturing the 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 then got a button that actions the storeVisit() method.
<button class="button is-primary" #click="storeVisit">Save Visit</button>
My controller waiting the post request
public function store(Request $request)
{
return $request->visitors;
}
My response
{"visitors":[[],[]]}

Answer 1

visitor should be an object, not an array
data: {
visitors: [],
visitor: {}, // <- object here
},
addVisitor() {
this.visitors.push(this.visitor);
this.visitor = {}; // <- reset to an empty object
},