I am trying to do the most simple post using Vuejs and laravel but I keep getting an "error 500" along with a strange "Uncaught (in promise)" error when I look it up in chrome dev tools, so heres the code.
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="token" id="token" value="{{ csrf_token() }}">
<title>Guestbook</title>
<link rel="stylesheet" href="http://ift.tt/1K1B2rp">
</head>
<body>
<div id="chatbox">
<div class="container">
<div class="row">
<form method="POST" v-on:submit="sendMessage">
<h1 v-if="nameIsSet">@{{ userInfo.name }}</h1>
<input type="text" placeholder="Name" v-model="userInfo.name" v-if="! nameIsSet"><button v-if="! nameIsSet" class="btn btn-info" v-on:click="setName">Set Name</button>
<br>
<input type="text" placeholder="Message" v-if="nameIsSet" v-model="userInfo.message"><button v-if="nameIsSet">Send Message</button>
{{ csrf_field() }}
</form>
</div>
</div>
</div>
<script src="http://ift.tt/1LL40sh"></script>
<script src="js/view-resource.min.js"></script>
<script src="js/guestbook.js"></script>
</body>
</html>
The VueJs Script
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
new Vue({
el: '#chatbox',
data:{
userInfo:{
name: '',
message: ''
},
nameIsSet: false
},
methods:{
setName: function(){
this.nameIsSet = true;
},
sendMessage: function(e){
e.preventDefault();
console.log(userInfo);
var userInfo = this.userInfo;
this.$http.post('api/messages', userInfo);
}
}
})
The Laravel 5 Routes
Route::get('/', function(){
return view('guestbook');
});
//API
Route::get('api/messages', function(){
return App\Message::all();
});
Route::post('api/messages', function(){
App\Message::create(Request::all());
});
As described above it does not work, i'm not sure what the server side error is here anyone gots any ideas ^^?
from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/21rzj77
via IFTTT
Aucun commentaire:
Enregistrer un commentaire