vue-如果有条件不起作用.If-Else块似乎被跳过了

Question

这是我在此处发布的一个后续问题：（我在数据库Vue Outputs 8记录中有2个记录）。在这个问题中，很难找到我正在建造的在线赌场的游戏列表。在我最初的问题中，Vue无法将JSON加载为JSON，但现在已经解决了。

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

我的V-是否正确编程了？我检查了文档，一切似乎都正确设置了。我觉得奇怪的是，v-if或v-elsedivs>均未执行。

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;
        });
    });
},

希望这会有所帮助！