Vuejs2 数据更改后，Vue v-for列表不会更新

想法很简单： Vue实例从API加载组。 这些组使用v-for语法显示

groupdata格式正确，并使用.push函数添加到app.groups中，该函数应更新v-for列表

但是，v-for列表不会更新

当我将v-for=“group in groups”（外部加载）更改为v-for=“group in people”（已经在应用程序中）时，它会给出输出

HTML

原料药

{

“团体”：[ {

]

---

}在执行

加载

函数时，

应用程序

似乎未定义。因此，使用ES6箭头函数语法，加载函数应如下所示：

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

---

我在问题中遗漏了一个事实（因为我认为这无关紧要），那就是我在Laravel框架中工作，Laravel会自动在main.js中导入VUEJ。当另外加载Vue时，这不太好。我删除了main.js，它就可以工作了。

更新：adding:key=“group.id”未工作这也是推送app.groups或this.groups中的数据的一种工作方式，但是这也不会更新Vue视图。更具体地说，只有Vue实例中的数据已经被加载。即使我键入命令“app.groups.push（{name:“另一个组”}]；”新组被推送到app.groups，但是视图没有更新。谢谢你的回复！好的，你能在JSFIDLE或其他文件中重现这个问题吗？问题是Vue是由于我自己包含的src而加载的，之后Vue应用被初始化，然而，在Vue再次加载之后，因为Laravel通过def加载它第二次加载Vue库导致第一个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);
            })
        }
    }

});

  "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"
}

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