帶有laravel 5.3的Vue.js

Question

我正在將Laravel 5.3與Vue.js一起使用（這是新的）。 這是我當前的代碼

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::get('/messages', function() {
     return Message::latest()->get();
    });

注意：在這里，當我嘗試以localhost：8000 / api / messages的身份直接訪問路由時，將獲得具有完整數據的數組

我認為我有

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

我已經為所有jquery，vue.js和vue.resource提供了在線庫。 當我使用vue.js調試器時，它表明它返回messages[]但它為空。 我遵循了很多示例，但無法使其正常工作。 任何幫助是極大的贊賞

Answer 1

如果您使用的是vue.js 2.0，現在不建議使用ready，則可以改用mount

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

Vue.js文件

Answer 2

由於您使用的是箭頭語法，因此我切換到完整的ES2015代碼

getMessages() {

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

}

Answer 3

嘗試這個：

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