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

ajax请求的this方法的回调函数中的done未引用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");
});

}

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

从流明api中获取数据时返回undefined

1 个答案: