從流明api獲取數據時返回undefined

Question

我使用流明作爲我的api，並通過使用vue js的laravel來訪問它。請參閱下面的代碼。當我console.log書籍回調時，我得到了流明api中的所有對象。但是，當我嘗試在我的視圖頁面上顯示它沒有任何顯示。另外當我console.log books.title我得到未定義的值。任何幫助將不勝感激。

Vue.component('bookmanager', { 

    template: '#book-template', 

    data: function(){ 
     return{ 
      books: [] 
     }; 
    }, 

    created: function(){ 
     $.ajax({ 

      url: "http://localhost/bookmanager/public/book", 
      crossDomain: true 
     }).done(function(books){ 
      this.books = books; 
      console.log(books); 
      console.log("success"); 
     }).fail(function(){ 
      console.log("error"); 
     }); 
    } 
}); 

new Vue({ 

    el: 'body' 

}); 

我的索引視圖頁面

<div class="container"> 
    <bookmanager></bookmanager> 
</div> 

<template id="book-template"> 

    <h1>Book Manager</h1> 
    <ul class="list-group"> 
     <li class="list-group-item" v-for="book in books"> 
      @{{ book->title }} 
     </li> 

     <li class="list-group-item" v-for="book in books"> 
      @{{ book->isbn }} 
     </li> 
    </ul> 

</template> 

Answer 1

的this回調函數裏面爲你的AJAX請求不指vm實例的done方法。試試這個

created: function(){ 
var vm = this; 
$.ajax({ 

    url: "http://localhost/bookmanager/public/book", 
    crossDomain: true 
}).done(function(books){ 
    vm.$set('books', books);//or vm.books = books; 
    console.log(books); 
    console.log("success"); 
}).fail(function(){ 
    console.log("error"); 
}); 

}

我注意到你正在使用book->title代替book.title您v-for循環內