VueJS & Laravel 5.3 - laravel-5

Question

Laravel 5.3 + Vue JS + Vue-Resource
I am trying to do simple foreach loop with fetching data (with ajax).
my vuejs script file:
var vm = new Vue({
el:'#posts-app',
methods: {
fetchPosts: function(){
this.$http.get('/api/fetchPosts',function(data){
this.$set('allposts',data);
});
}
},
ready: function(){
this.fetchPosts();
console.log(this.allposts);
}});
Laravel Controller:
Route::get('api/fetchPosts', function(){
return App\Post::all();});
Blade template:
<div id="posts-app">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Posts</h1>
<hr />
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Posted</td>
<td>Title</td>
<td>Author</td>
</tr>
</thead>
<tbody>
<tr v-for="post in allposts">
<td>#{{ post.id }}</td>
<td>#{{ post.id }}</td>
<td>#{{ post.id }}</td>
<td>#{{ post.id }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Laravel response:
[{"id":1,"created_at":"2016-09-12 00:00:00","updated_at":"2016-09-12 00:00:00","title":"Post #1","excerpt":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","content":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","author_id":1},{"id":2,"created_at":"2016-09-12 00:00:00","updated_at":"2016-09-12 00:00:00","title":"Post #2","excerpt":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","content":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","author_id":1},{"id":3,"created_at":"2016-09-12 00:00:00","updated_at":"2016-09-12 00:00:00","title":"Post #3","excerpt":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","content":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","author_id":1},{"id":4,"created_at":"2016-09-12 00:00:00","updated_at":"2016-09-12 00:00:00","title":"Post #4","excerpt":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","content":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","author_id":1},{"id":5,"created_at":"2016-09-12 00:00:00","updated_at":"2016-09-12 00:00:00","title":"Post #5","excerpt":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","content":"No? Alright, be that way. It's your meeting. Why don't you start talking and tell me what you want? Oh man! 50 G's? How you figure that? Partner? Oh yeah, I remember that little bitch! So you must be his daddy. Let me get this straight... I steal your dope, hmm? I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant. \r\n\r\nWhat? What do you want?! No. Don't even tell me you're hungry. Don't go there. Hahaha! Are you mad doggin' them, Tio? What, you don't like them? One ding. That means yes. Tio don't like you. Why don't you like them, Tio? You don't trust them? Why don't you trust them, Tio? BULLSHIT! MY TIO DOES NOT LIE! \r\n\r\nMr. Clean and his boy. I'm sorry that I had to tune you up. Respect, ese, you gotta give it to get it. What are we doing way the hell out there, what they close the mall or something? Heisenberg come on break it out. That's it? That's all you got? I thought you was a player. \r\n\r\nYou told me two pounds and now you waste my time with these Chiclets? Seventeen and a half, minus the half for wasting my time. What, you gonna argue? You got something to say? You're doing business like a couple little bitches. ","author_id":1}]
I get empty page, but I have ajax response with valid return code with all posts from database. What am I doing wrong?
Thanks

Answer 1

It looks like your vue resource call is not correct. The current version returns a promise with the first function being the success callback. As you don't mention the versions of vue and vue-resource you are using I reference the CDN versions.
A working reference would be.
<html>
<body>
<div id="posts-app">
<ul>
<li v-for="post in posts">{{post.title}}</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.1/vue-resource.min.js"></script>
<script>
var vm = new Vue({
el:'#posts-app',
methods: {
fetchPosts: function () {
this.$http.get('/api/fetchPosts').then(function (response) {
this.$set('posts', response.body);
// or
// this.$set('posts', response.data);
});
}
},
ready: function () {
this.fetchPosts();
}
});
</script>
</body>
</html>
The Laravel api call piece.
Route::get('fetchPosts', function () {
return [
[
'id' => 1,
'title' => 'title one',
],
[
'id' => 2,
'title' => 'title two',
]
];
});

Answer 2

Well, I find out the problem.
When I call vue script from blade template it works fine, but if I call it from .js file it doesn't work....

Answer 3

return the data as json from laravel like this
Route::get('fetchPosts', function() {
$data = [
[
'id' => 1,
'title' => 'title one',
],
[
'id' => 2,
'title' => 'title two',
]
];
return response()->json($data);
});
and declare your posts as an empty array in the data object
<script>
var vm = new Vue({
el: '#posts-app',
data: {
posts: [],
},
methods: {
fetchPosts: function() {
this.$http.get('/api/fetchPosts').then(function(response) {
this.$set('posts', response.data);
});
}
},
ready: function() {
this.fetchPosts();
}
});
</script>