1

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

]

}

4

2 回答 2

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)
    })
}
于 2017-11-26T15:12:42.817 回答
0

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

于 2017-11-27T11:28:49.590 回答