title: Trouble with accessing Object property in vue
body: <p>I am trying to access an Object property in vue component computed property but I am getting an error saying the property is undefined. I have setup a prototype <a href="http://test-scores.surge.sh/" rel="nofollow noreferrer">here</a>. When I try to use</p>
  <pre><code>playerEntry.stats.RecYards[&quot;#text&quot;] &gt; &quot;0&quot;
  </code></pre>
  <p>Vue complains</p>
  <blockquote>
  <p>[Vue warn]: Error in render: &quot;TypeError: playerentry.stats.RecYards is undefined&quot;</p>
  </blockquote>
  <p>and looking in vue.js devtools under Computed I see <strong>playerReceivingStats:&quot;(error during evaluation)&quot;</strong>
  here is the pertinent code:</p>
  <p>boxscore.js</p>
  <pre><code>const boxScoresStats = {
    stats: Vue.component(&quot;box-scores&quot;, {
      props: [&quot;props_box_score&quot;, &quot;props_gameID&quot;],
      data: function() {
        return {
          playerStats: this.props_box_score.data.gameboxscore.awayTeam.awayPlayers
            .playerEntry
        };
      },
      computed: {
        playerPassingStats: function() {
          return this.playerStats.filter(playerEntry =&gt; {
            return playerEntry.player.Position === &quot;QB&quot;;
          });
        },
        playerReceivingStats: function() {
          return this.playerStats.filter(playerEntry =&gt; {
            console.log(playerEntry.stats.RecYards[&quot;#text&quot;]);
            return playerEntry.stats.RecYards[&quot;#text&quot;] &gt; &quot;0&quot;;
          });
        }
      },
  </code></pre>
  <p>Template</p>
  <pre><code>&lt;div v-for=&quot;playerStats in playerReceivingStats&quot;&gt;
      &lt;tr class=&quot;d-flex&quot;&gt;
          &lt;td class=&quot;col-3 justify-content-center&quot; scope=&quot;row&quot;&gt;
          {{playerStats.player.FirstName}} {{playerStats.player.LastName}} ({{playerStats.player.Position}})
          &lt;/td&gt;
          &lt;td class=&quot;col-2 justify-content-center&quot; justify-content=&quot;center&quot;&gt;
              {{ playerStats.stats.Receptions['#text'] }} &lt;/td&gt;
          &lt;td class=&quot;col-3 justify-content-center&quot;&gt;{{playerStats.stats.RecYards['#text']}}&lt;/td&gt;
          &lt;td class=&quot;col-2 justify-content-center&quot;&gt;{{playerStats.stats.RecTD['#text']}}&lt;/td&gt;
          &lt;td class=&quot;col-2 justify-content-center&quot;&gt;{{playerStats.stats.Targets['#text']}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have tried both bracket and dot notation but still no good. I see the values from the console.log printing out ok. But I am at a loss as to why it says undefined when I can see the object property in devtools. Also note if I shorten the eval in computed to <strong>playerEntry.stats.RecYards</strong> I get no error? But I then get incorrect results. Any help much appreciated.</p>
  <p><strong>Updated:</strong></p>
  <p>Here is the computed property that works:</p>
  <pre><code> playerReceivingStats: function() {
          return this.offensivePlayers.filter(playerEntry =&gt; {
            if (typeof playerEntry.stats.RecYards != &quot;undefined&quot;) {
              return playerEntry.stats.RecYards[&quot;#text&quot;] &gt; &quot;0&quot;;
            }
          });
        }
      }
  </code></pre>