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

{

“群组”：[ {

  "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

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

Answer 2

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

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

2 个答案: