Vue.js with laravel 5.3

Question

I'm using Laravel 5.3 with Vue.js(very new to this). Here's my current code

app.js

var vm = new Vue({
    el: '#app',

    data:  {
            messages: []
    },

    ready: function(){

        this.getMessages();
    },


    methods: {

        getMessages: function(){
                this.$http.get('api/messages').then((response) => {
                    this.$set('messages', data);
                        }, (response) => {
                });
        }
    }
});

api.php route is very simple

Route::get('/messages', function() {
     return Message::latest()->get();
    });

Note: here when i try access the route directly as localhost:8000/api/messages i get the array with the full data

On my view i have

<div class="content"   id="app">
                <tr v-for="message in messages">
                    <td> @{{ message}} </td>
                </tr>
</div>

I have included online libraries for all jquery, vue.js, and vue.resource. When i use vue.js debugger it shows that it returns messages[] but it's empty. I have followed a lot of examples but couldn't get it to work. Any help is greatly appreciated

ABDEL-RHMAN · Accepted Answer · 2016-10-02 11:35:16Z

2

if you are using vue.js 2.0 , ready is deprecated now, you may use mounted instead

mounted: function () {
  this.$nextTick(function () {
    this.getMessages();
  })
}

Vue.js Docs

answered Oct 2, 2016 at 11:35

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

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

Comments

Belmin Bedak · Accepted Answer · 2016-10-02 10:34:46Z

1

Since you are using the arrow syntax, then I switched to full ES2015 Code

getMessages() {

    this.$http.get('api/messages')
      .then( result => {
       this.messages = result.json() 
      })

}

answered Oct 2, 2016 at 10:34

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

2 Comments

Shavkat Over a year ago

Belmin. Thanks so much for your response. i tried and it still returned empty. but i kind of find a solution perhaps not the best. I was using vue.js version 2.0.1, once i changed it to older version 1.0.2 it worked.

Belmin Bedak Over a year ago

Unfortunately I didn't work with VueJS 2.0 yet, so probabbly something in API is changed.

m0z4rt · Accepted Answer · 2017-10-27 05:53:05Z

0

Try this:

var vm = new Vue({
    el: '#app',

    data:  {
            messages: []
    },

    ready: function(){

        this.getMessages();
    },


    methods: {

        getMessages: function(){
                let ctrl = this;
                this.$http.get('api/messages').then((response) => {
                    this.messages = response.data;
                });
        }
    }
});

answered Oct 27, 2017 at 5:53

m0z4rt

1,2452 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Vue.js with laravel 5.3

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related