-1

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

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

Vue 抱怨

[Vue 警告]：渲染错误：“TypeError：playerentry.stats.RecYards 未定义”

并查看 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";
          }
        });
      }
    }
4

2 回答 2

0

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

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

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

然后，您将需要检查您的代码，找到该数据可用的点，然后设置someCondition = true，一旦翻转此标志，您的组件将呈现，并且它所依赖的数据将可用。

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

于 2019-10-10T18:04:08.133 回答
0

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

data: function() {
      return {
        playerStats: { 
         stats: {
           RecYards: {}
         }
        },
      };
    },
created() {
  this.playerStats = this.props_box_score
                         .data.gameboxscore.awayTeam.awayPlayers.playerEntry;
}
于 2019-10-10T16:25:59.433 回答