[Vuejs]-VueJS & Laravel 5.3

by

0👍

It looks like your vue resource call is not correct. The current version returns a promise with the first function being the success callback. As you don’t mention the versions of vue and vue-resource you are using I reference the CDN versions.

A working reference would be.

<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>

The Laravel api call piece.

Route::get('fetchPosts', function () {
    return [
        [
            'id' => 1,
            'title' => 'title one',
        ],
        [
            'id' => 2,
            'title' => 'title two',
        ]
    ];
});
👤Leon Vismer

0👍

Well, I find out the problem.

When I call vue script from blade template it works fine, but if I call it from .js file it doesn’t work….

👤vol4ikman

0👍

return the data as json from laravel like this

Route::get('fetchPosts', function() {
    $data = [
        [
            'id' => 1,
            'title' => 'title one',
        ],
        [
            'id' => 2,
            'title' => 'title two',
        ]
    ];

    return response()->json($data);
});

and declare your posts as an empty array in the data object

<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>
👤codenathan

Leave a comment