Vue.js с laravel 5.3

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

Примечание: здесь, когда я пытаюсь получить доступ к маршруту непосредственно в качестве локального хоста: 8000/API/сообщения я получаю массив с полными данными

На мой взгляд у меня есть

<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

Поскольку вы используете синтаксис со стрелкой, а затем я перешел на полный ES2015 кодекс

getMessages() { 

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

} 

Answer 2

, если вы используете vue.js 2.0, готовый осуждается в настоящее время, вы можете использовать установленный вместо

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

Vue.js Docs

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