从流明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循环内