数据更改后Vue v-for列表不更新答案

【问题标题】：Vue v-for list does not update after data changed数据更改后Vue v-for列表不更新
【发布时间】：2018-05-09 19:13:22
【问题描述】：

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

groupdata 格式正确，并使用 .push 函数添加到 app.groups，这应该会更新 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"
}

]

}

【问题讨论】：

更新：添加 :key="group.id" 无效

标签： vuejs2 updates v-for

【解决方案1】：

当你的load 函数被执行时，app 似乎是未定义的。因此，使用 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)
    })
}

【讨论】：

这也是一种在 app.groups 或 this.groups 中推送数据的工作方式，但是这也不会更新 Vue 视图。更具体地说，只有 Vue 实例中的数据已经被加载。即使我键入命令“app.groups.push({name: "Another Group"}];”，新组也会被推送到 app.groups，但是视图没有更新。谢谢您的回复！
好的，你能用 jsfiddle 或其他东西重现这个问题吗？
问题是 Vue 是由于我自己包含的 src 而被加载的，之后 Vue 应用程序被初始化，然而，在 Vue 被再次加载之后，因为 Laravel 默认加载它。 Vue 库的第二次加载导致第一个 Vue 应用程序崩溃。

【解决方案2】：

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

【讨论】：