VueJS & Laravel 5,3

Question

Laravel 5,3 + Вьет JS + Vue-Resource

Я пытаюсь сделать простой цикл Еогеаспа с выборкой данных (с помощью AJAX).

мой vuejs файл сценария:

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 Контроллер:

Route::get('api/fetchPosts', function(){ 
return App\Post::all();}); 

клинка шаблон:

<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 ответ:

[{"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}] 

Я получаю пустую страницу, но у меня есть ответ ajax с действительным кодом возврата со всеми сообщениями из базы данных. Что я делаю не так? Thanks

Answer 1

Похоже, что ваш вызов ресурса vue неверен. Текущая версия возвращает обещание, при этом первой функцией является обратный вызов успеха. Поскольку вы не упоминаете версии vue и vue-resource, которые вы используете, я ссылаюсь на версии CDN.

Рабочая ссылка будет.

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

Laravel api call шт.

Route::get('fetchPosts', function() { 
    return [ 
     [ 
      'id' => 1, 
      'title' => 'title one', 
     ], 
     [ 
      'id' => 2, 
      'title' => 'title two', 
     ] 
    ]; 
}); 

Answer 2

Ну, я выясняю проблему.

Когда я звоню вю скрипт из шаблона лезвия он отлично работает, но если я называю это из .js файла он не работает ....

Answer 3

возвращаемые данные как JSON из Laravel, как этот

Route::get('fetchPosts', function() { 
    $data = [ 
     [ 
      'id' => 1, 
      'title' => 'title one', 
     ], 
     [ 
      'id' => 2, 
      'title' => 'title two', 
     ] 
    ]; 

    return response()->json($data); 
}); 

и объявить свои сообщения, как пустой массив в данном объект

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