Using Vue in Laravel project

Question

working on a project in Laravel and I want to integrate Vue and Vue Resource into it. I have setup it up but it is not working as expected. Below is my code:

routes.php

Route::get('api/projects', function() {
    return App\Project::all();
});

app.js

new Vue({
    el: '#project',

    data: {
        projects: []
    },

    ready: function() {
        this.getProjects();
    },

    methods: {
        getProjects: function() {
            this.$http.get('api/projects').then(function(projects) {
                this.$set('projects', projects);
            });
        }
    }
});

my view

<div class="content" v-for="project in projects">
    <h3 class="title">
        @{{ project.title }}
    </h3>
    @{{ project.description }}
</div>

With the code above, nothing is displayed on the page but if I

@{{ $data | json }}

I get projects data in json. This is kind of weird, please what am I doing wrong.

Answer 1

Thanks to @PROGRAMMATOR on laracast. His answer solved the issue.

this.$set('projects', projects.data);