在 vue 中访问 Object 属性的问题答案

【问题标题】：Trouble with accessing Object property in vue在 vue 中访问 Object 属性的问题
【发布时间】：2019-10-10 16:19:01
【问题描述】：

我正在尝试访问 vue 组件计算属性中的 Object 属性，但我收到一条错误消息，指出该属性未定义。我已经设置了原型here。当我尝试使用时

playerEntry.stats.RecYards["#text"] > "0"

Vue 抱怨

[Vue 警告]：渲染错误：“TypeError: playerentry.stats.RecYards is undefined”

在 Computed 下查看 vue.js devtools 我看到 playerReceivingStats:"(error during evaluation)" 这是相关的代码：

boxscore.js

const boxScoresStats = {
  stats: Vue.component("box-scores", {
    props: ["props_box_score", "props_gameID"],
    data: function() {
      return {
        playerStats: this.props_box_score.data.gameboxscore.awayTeam.awayPlayers
          .playerEntry
      };
    },
    computed: {
      playerPassingStats: function() {
        return this.playerStats.filter(playerEntry => {
          return playerEntry.player.Position === "QB";
        });
      },
      playerReceivingStats: function() {
        return this.playerStats.filter(playerEntry => {
          console.log(playerEntry.stats.RecYards["#text"]);
          return playerEntry.stats.RecYards["#text"] > "0";
        });
      }
    },

模板

<div v-for="playerStats in playerReceivingStats">
    <tr class="d-flex">
        <td class="col-3 justify-content-center" scope="row">
        {{playerStats.player.FirstName}} {{playerStats.player.LastName}} ({{playerStats.player.Position}})
        </td>
        <td class="col-2 justify-content-center" justify-content="center">
            {{ playerStats.stats.Receptions['#text'] }} </td>
        <td class="col-3 justify-content-center">{{playerStats.stats.RecYards['#text']}}</td>
        <td class="col-2 justify-content-center">{{playerStats.stats.RecTD['#text']}}</td>
        <td class="col-2 justify-content-center">{{playerStats.stats.Targets['#text']}}</td>
    </tr>
</div>

我尝试了括号和点符号，但仍然没有好。我看到 console.log 中的值打印正常。但是当我可以在 devtools 中看到对象属性时，我不知道为什么它说未定义。另请注意，如果我将计算中的 eval 缩短为 playerEntry.stats.RecYards 我没有收到错误？但是我得到了不正确的结果。非常感谢任何帮助。

更新：

这是有效的计算属性：

 playerReceivingStats: function() {
        return this.offensivePlayers.filter(playerEntry => {
          if (typeof playerEntry.stats.RecYards != "undefined") {
            return playerEntry.stats.RecYards["#text"] > "0";
          }
        });
      }
    }

【问题讨论】：

该播放器缺少 RecYards 属性。当我尝试它时，它似乎是Logan Cooke，id 14702，this.playerStats[11]。您看到的日志记录是针对前几个玩家的，它们运行良好，但是当它到达该玩家时它就会崩溃。
尝试将playerStats 设置为计算属性而不是数据属性。
关于更新：缺少相关字段的是playerStats[11]。图为playerStats[0]。

标签： javascript vue.js object-notation

【解决方案1】：

您需要添加 created 钩子以将 props 值设置为 data 属性

data: function() {
      return {
        playerStats: { 
         stats: {
           RecYards: {}
         }
        },
      };
    },
created() {
  this.playerStats = this.props_box_score
                         .data.gameboxscore.awayTeam.awayPlayers.playerEntry;
}

【讨论】：

抱歉，更新后仍然出现“playerEntry.stats.RecYards is undefined”。
你能用上面的方法再试一次吗？
抱歉仍然“RecYards undefined”
props 在data 函数中可用，您不需要使用created 来复制它们。官方文档中有一个例子，vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
@Alan 我相信我已经在我发表的评论中解释了问题所在。您尝试使用的数据只是从服务器响应中丢失。

【解决方案2】：

您的子组件可能在父组件中的数据可用之前就已加载。请记住，JavaScript 是异步的，因此您的组件渲染可能在数据可用之前就已经发生了。

一旦数据可用，您可以在组件上使用条件渲染来渲染组件。

<my-component v-if="someCondition">

然后你需要检查你的代码，找到数据可用的点，然后设置someCondition = true，一旦这个标志被翻转，你的组件将呈现，它所依赖的数据将是可用。

使用v-if 而不是v-show。如果您使用v-show，您的组件将急切地呈现，但只是被 CSS 隐藏。如果你使用v-if，一旦条件为真，你的组件就会延迟渲染。

【讨论】：