1

Laravel 5.3 + Vue JS + Vue-Resource

我正在尝试通过获取数据(使用 ajax)来做简单的 foreach 循环。

我的 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 响应和有效的返回码以及来自数据库的所有帖子。我究竟做错了什么?谢谢

4

3 回答 3

0

看起来您的 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 调用部分。

Route::get('fetchPosts', function () {
    return [
        [
            'id' => 1,
            'title' => 'title one',
        ],
        [
            'id' => 2,
            'title' => 'title two',
        ]
    ];
});
于 2016-09-12T11:48:17.847 回答
0

嗯,我发现了问题。

当我从刀片模板调用 vue 脚本时,它工作正常,但如果我从 .js 文件调用它,它就不起作用......

于 2016-09-12T12:50:24.003 回答
0

像这样从laravel将数据作为json返回

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>
于 2016-09-22T10:28:22.467 回答