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

Question

这个想法很简单： 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

{

"groups": [ {

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

]

}

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

Answer 2

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

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

Vue v-for list does not update after data changed

updates

vuejs2

v-for