Vue.js с laravel 5.3

Я использую 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[], но он пуст. Я следил за множеством примеров, но не смог заставить его работать. Любая помощь приветствуется


javascript vue.js jquery laravel vue-resource
person Shavkat    schedule 02.10.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

Документы Vue.js

person ABDEL-RHMAN    schedule 02.10.2016

arrow_upward
1
arrow_downward

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

getMessages() {

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

}
person Belmin Bedak    schedule 02.10.2016
comment
Бельмин. Спасибо большое за Ваш ответ. Я попробовал, но он все равно вернулся пустым. но я нахожу решение, возможно, не самое лучшее. Я использовал vue.js версии 2.0.1, как только я заменил его на более старую версию 1.0.2, все заработало. - person Shavkat; 02.10.2016
comment
К сожалению, я еще не работал с VueJS 2.0, так что, вероятно, что-то в API изменилось. - person Belmin Bedak; 02.10.2016

arrow_upward
0
arrow_downward

Попробуй это:

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;
                });
        }
    }
});
person m0z4rt    schedule 27.10.2017