Post method fail with Vue.js "500 (Internal Server Error)" - php

Question

So I'm trying to store data in my election_users table but making a POST request gives a "500 (Internal Server Error)" error. My object does return the right "election_id". I don't know what I'm doing wrong.
here's my method in my vue script:
methods: {
createVote: function () {
var itemId = this.$route.params.id
var input = this.newUserVoted
this.newUserVoted.election_id = itemId
this.$http.post('http://www.nmdad2-05-elector.local/api/v1/electionuser', input)
.then((response) => {
this.newUserVoted = {'election_id': itemId}
}).catch(e => {
console.log(e)
console.log(input)
})
}
},
my UsersController.php
public function store(Request $request)
{
$userVoted = new ElectionUser();
$userVoted->election_id = $request['election_id'];
$userVoted->user_id = Auth::id();
if ($userVoted->save()) {
return response()
->json($userVoted);
}
}
my routesApi.php
Route::post( 'electionuser', 'UsersController#store' );
My ElectionUser.php
class ElectionUser extends Model
{
// Relationships
// =============
protected $fillable = [
'election_id',
'user_id'
];
public function election()
{
return $this->belongsToMany(Election::class);
}
}

Answer 1

You need to add CSRF token:
https://laravel.com/docs/5.4/helpers#method-csrf-token
For example in the view
<script>
var csrf = '{{csrf_token()}}';
</script>
And in your script
var formData = new FormData();
formData.append('_token', csrf);
formData.append('input', this.newUserVoted);
this.$http.post('http://www.nmdad2-05-elector.local/api/v1/electionuser', formData)