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

Posted 2023-02-22

【中文标题】Vue-if 条件不起作用。 if-Else 块似乎被跳过

【英文标题】：Vue-if conditional not working. if-Else block appears to be skipped

【发布时间】：2017-05-15 00:53:30

【问题描述】：

这是我在此处发布的问题的后续问题：(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'


);

【问题讨论】：

如果v-if 被省略，game.player1 是否正确渲染？只是想知道game.ready 是否被误解了。

我完全去掉了v-if条件，在列表中看不到player1的ID显示。我看到一个空变量被放入。我认为 JSON 输出正在被解析。当我在 Google Chrome Dev,s 工具中查看对象时，我看到了一个 JSON 对象。

【参考方案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;
        );

    );
,

希望这会有所帮助！

【讨论】：

感谢您的回答，但现在当我尝试查看该页面时，在我的 Chrome DevTools 中，我收到 [Vue 警告]：评估表达式“game.player1”时出错：TypeError：无法读取未定义的属性“player1”（在组件中找到：）。

@TomMorison 在这种情况下，您能否编辑您的问题以显示如果您在 response.json() 函数中执行 console.log(games) 会得到什么？此外，您可能会发现这很有用：chrome.google.com/webstore/detail/vuejs-devtools/…

这是我在 DevTools 中得到的截图s29.postimg.org/mjgqv4rlj/…

好的，下一个。注释掉整个<ul>...</ul> 并添加<pre>@ games | json </pre>。你得到了什么？

我只是得到一个空数组。当我在浏览器中访问 api/games 时，我得到了 JSON 输出。