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

Answer 2

I saw you are using code like this :

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

But you have to bind this with $http request as right now this.$http working within method :

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

You can use like this also :

this.projects = projects;

then :

{{ $data | json }}

if result coming along with .data array then

this.projects = projects.data;