Список Vue v-for не обновляется после изменения данных

Идея проста: экземпляр Vue загружает группы из API. Эти группы показаны с использованием синтаксиса v-for.

Групповые данные отформатированы правильно и добавляются в app.groups с помощью функции .push, которая должна обновить список v-for.

Однако список v-for не обновляется.

Когда я меняю v-for = "group in groups" (загружается извне) на v-for = "group in people" (уже в приложении), это дает результат.

HTML

   <div id="app" class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">Realtime Socket Chat</div>
                <div class="panel-body" v-if="dataReady" v-for="group in groups"> @{{ group.name }}
                    <a v-bind:href="group.link" class="pull-right">
                        <div class="btn btn-xs btn-primary">
                            Join
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

Vue

var app = new Vue({
    el: "#app",
    data: {
        groups: [],
        people: [{name: 'hi'}, {name: 'lol'}]
    },
    mounted: function() {
        this.load()
    },
    methods: {
        load: function() {
            axios.get('http://example.com/groups')
                .then(function (response) {

                console.log(response.data.groups);

                response.data.groups.forEach(function(group) {
                    app.groups.push(group);
                });

                // app.groups.forEach(function (group) {
                //    group.link = '/g/' + group.id + '/join';
                // });
                // console.log(response.data.groups);

                console.log(this.groups); //outputs [{...}, {...}] so this.groups is good
            })
            .catch(function (error) {
                this.errors.push(error);
                console.log(error);
            })
        }
    }

});

API

{

"группы": [{

  "id": 1,
  "name": "Photography Chat",
  "created_at": "2017-11-26 08:50:16",
  "updated_at": "2017-11-26 08:50:16"
},

{
  "id": 2,
  "name": "Media Chat",
  "created_at": "2017-11-26 08:50:16",
  "updated_at": "2017-11-26 08:50:16"
}

]

}


updates vuejs2 v-for
person Eltyer    schedule 26.11.2017    source источник
comment
Обновление: добавление: key = group.id не работает   -  person Eltyer    schedule 26.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, что app не определено, когда ваша load функция выполняется. Итак, используя синтаксис стрелочной функции ES6, ваша load функция должна выглядеть так:

load: function() {
  axios.get('http://example.com/groups')
    .then(response => {    
      let groups = response.data.groups || []

      groups.forEach(group => {
        this.groups.push(group)
      })

      console.log(this.groups)

    })
    .catch(error => {
      this.errors.push(error)
      console.log(error)
    })
}
person Ikbel    schedule 26.11.2017
comment
Это также рабочий способ отправки данных в app.groups или this.groups, однако он также не обновляет представление Vue. В частности, уже загружаются только данные из экземпляра Vue. Даже когда я набираю команду app.groups.push ({name: Another Group}]; новая группа помещается в app.groups, однако представление не обновляется. Спасибо за ваш ответ! - person Eltyer; 27.11.2017
comment
Хорошо, не могли бы вы воспроизвести проблему в jsfiddle или что-то в этом роде? - person Ikbel; 27.11.2017
comment
Проблема заключалась в том, что Vue был загружен из-за src, который я сам включил, после чего приложение Vue было инициализировано, однако после этого Vue был загружен снова, потому что Laravel загружает его по умолчанию. Эта вторая загрузка библиотеки Vue вызвала сбой первого приложения Vue. - person Eltyer; 29.11.2017

arrow_upward
0
arrow_downward

Факт, который я не упомянул в вопросе (потому что предполагал, что это не имеет значения), заключается в том, что я работаю в рамках Laravel, Laravel автоматически импортирует Vuejs в main.js. Что не очень хорошо, когда Vue загружается дополнительно. Я удалил main.js, и он работает.

person Eltyer    schedule 27.11.2017