Using Vue and in Laravel project

Hey guys, 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.

erikverbeek

9 years ago

Level 9

We might be overlooking the same little bug but as far as I can see this code should work. Are you familiar with the Vue DevTools for Chrome? It will let you see exactly how Vue saves the data you're pulling in. Perhaps this shows you your data is not saving the way you're expecting.

Edit: @PROGRAMMATOR found the little bug. You have to take the data object from the response and save that instead of saving the complete response.

1 like

PROGRAMMATOR

9 years ago

Best Answer

Level 2

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

2 likes

Please or to participate in this conversation.