Question

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

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

Vue抱怨

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

并在Compute下查看vue.js devtools，我看到 playerReceivingStats：“（评估期间出错）” 这是相关的代码：

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中看到对象属性时，为什么它说未定义，我还是一头雾水。还要注意，如果我将计算的评估时间缩短为 playerEntry.stats.RecYards ，我不会出错吗？但是我得到错误的结果。任何帮助表示赞赏。

已更新：

这是有效的计算属性：

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

感谢您的输入。很好奇，为什么还要投票？有人可以详细说明是谁做的。谢谢...

Answer 1

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

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

Answer 2

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

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

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

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

使用v-if而不是v-show。如果使用v-show，则您的组件会急于呈现，但只会被CSS隐藏。如果您使用v-if，则当条件成立时，组件将延迟呈现。

在vue中访问Object属性时遇到问题

2 个答案: