Vue-if 条件不起作用。 if-Else 块似乎被跳过

Question

这是我在此处发布的问题的后续问题：(I have 2 records in a database Vue outputs 8 records)。在那个问题中，我在为我正在建立的在线赌场获取游戏的 JSON 列表时遇到了麻烦。在我最初的问题中，Vue 无法将 JSON 加载为 JSON，但现在已修复。

我现在尝试使用 Vue 解析这个 JSON 以循环遍历游戏数组中的所有游戏并打印 In progress 或 Game is joinable。但是，不是从数据库中获取 8 条不同的记录（来自this.$http.get 返回的一个奇怪的响应数组对象。我现在看到我的 JSON 列表似乎被我的 Vue 模板忽略了；集合中的任何对象都没有被输出（又是In progress 或Joinable。我只是得到一个空白列表。

我的 v-if 条件编程是否正确？我检查了文档，一切似乎都设置正确。我觉得奇怪的是，v-if 或 v-else，divs> 都没有被执行。

vuewgames.blade.php

@extends('app')


@section('content')
    <strong>Below is a list of joinable games</strong>
    <div class="container">
    <games></games>
    </div>

  <div id="games-list">
      <template id="games-template">



          <ul class="list-group">
              <li class="list-group-item" v-for="game in games">
                     <strong>play against @{{ game.player1 }}</strong>
              </li>



          </ul>

            <pre>@{{ games | json }}</pre>

      </template>


  </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>

    <script src="js/all.js"></script>
@endsection

all.js

Vue.component('games', {
    template: '#games-template',


    data: function() {
        return {

            games: []


        };



    },


    created: function () {

        var self = this;

        this.$http.get('/api/games').then(function (response) {
            // fetch array from jsoN object

            response.json().then(function (games) {
                console.log(games);
            });

        });
    },

});




new Vue({
    el: 'body'


});

Answer 1

您没有将信息传递给实例的原因是范围。

当您在 javascript 中使用闭包时，this 的范围不是包含对象。

解决此问题的一种方法是将this 分配给函数外部的另一个变量，然后改用它。您应该可以通过将 created 方法更改为：

created: function () {

    var self = this;

    this.$http.get('/api/games').then(function (response) {
        // fetch array from jsoN object

        response.json().then(function (games) {
            self.games = games;
        });

    });
},

希望这会有所帮助！