从 lumen api 获取数据时返回 undefined答案

【问题标题】：Returning undefined when fetching data from lumen api从 lumen api 获取数据时返回 undefined
【发布时间】：2016-02-13 01:25:41
【问题描述】：

我使用 lumen 作为我的 api，并使用 vue js 通过 laravel 访问它。请参考下面的代码。当我 console.log 书籍回调时，我得到了 lumen 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>

【问题讨论】：

标签： laravel-5 vue.js lumen

【解决方案1】：

您的 ajax 请求的 done 方法的回调函数中的 this 不引用 vm 实例。试试这个

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");
});

}

我注意到您在 v-for 循环中使用 book->title 而不是 book.title

【讨论】：

Ogie 谢谢伙计，我稍后再试。