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都没有＆gt;执行。

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

    });
},

希望这有帮助！

Vue-如果有条件不工作。 if-Else块似乎被跳过

1 个答案: