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.

ammezie · Accepted Answer · 2016-07-25 15:44:54Z

0

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

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

answered Jul 25, 2016 at 15:44

ammezie

3556 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mandeep Gill · Accepted Answer · 2016-07-25 16:09:41Z

0

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;

edited Jul 25, 2016 at 16:09

answered Jul 25, 2016 at 16:04

Mandeep Gill

4,9472 gold badges31 silver badges38 bronze badges

Collectives™ on Stack Overflow

Using Vue in Laravel project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related