Проблема с доступом к свойству объекта в VUE - PullRequest
Новая
       14

Проблема с доступом к свойству объекта в VUE

0 голосов
/ 10 октября 2019

Я пытаюсь получить доступ к свойству Object в вычисляемом свойстве компонента vue, но получаю сообщение об ошибке, говоря, что свойство не определено. Я настроил прототип здесь . Когда я пытаюсь использовать 

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

Vue жалуется

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: playerentry.stats.RecYards не определена»

и, глядя в vue.js devtools в разделе Computed, я вижу 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";
          }
        });
      }
    }

Спасибо за ввод. Любопытно, хотя почему понизить? Может ли человек уточнить, кто это сделал. спасибо ...

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Ваш дочерний компонент, вероятно, загружен до того, как данные станут доступны в родительском компоненте. Помните, JavaScript является асинхронным, поэтому рендеринг компонента может происходить еще до того, как данные станут доступны.

Вы можете использовать условный рендеринг для своего компонента для рендеринга компонента, как только данные станут доступны. 

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

Затем вам нужно будет пройти через ваш код, найти точку, в которой эти данные станут доступными, и затем установить someCondition = true, как только этот флаг будет перевернут, ваш компонент будет отображаться, и данные, от которых он зависит, будутдоступно.

Используйте v-if вместо v-show. Если вы используете v-show, ваш компонент будет рендериться, но будет скрыт с помощью CSS. Если вы используете v-if, ваш компонент будет лениво визуализироваться, когда условие будет выполнено.

0 голосов
/ 10 октября 2019

Вам нужно добавить созданный хук, чтобы установить значение реквизита для свойства данных 

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