Проблема с состоянием объекта данных vue в компоненте - PullRequest
Новая
       10

Проблема с состоянием объекта данных vue в компоненте

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

Я обновляю свой исходный проект vue и получаю сообщение об ошибке с объектом данных sports_feeds_boxscores _ *. На сайте есть три вкладки, чтобы сбросить баллы за три высшие лиги. Я добавляю статистику игроков для каждой игры сейчас. Сначала я занимался бейсболом, и все работало нормально. Сейчас я занимаюсь футболом и проблема возникает. У меня есть три объекта для статистики для каждой лиги. НФЛ также содержит объект с тремя днями недели, в которые они играют. То, что происходит, так это то, что статистика за воскресенье будет исправлена, но затем статистика четверга, которая должна состоять только из одной игры, вместо этого включает в себя все воскресные игры плюс игру в один четверг. И затем понедельник имеет результаты воскресенья и четверга, кроме понедельника. Я сделал все компоненты отдельными, а также три отдельных объекта данных для компонентов реквизита. И если я сначала нажму на вкладку nfl, а затем перейду на вкладку mlb, все результаты из объекта данных nfl будут в sports_feeds_boxscores_mlb . Я настроил сайт здесь , чтобы лучше понять, что происходит при использовании Vue.js devtools. Вот соответствующий код:

index.html: 

<component
            v-if="currentTabComponent === 'tab-mlb'"
            v-bind:is="currentTabComponent"
            v-bind:props_league_data="sports_feeds_data"
            v-bind:props_league_standings="standings"
            v-bind:props_baseball_playoffs="baseball_playoffs"
            v-bind:props_end_of_season="end_of_season[this.currentTab.toLowerCase()]"
            v-bind:props_box_game_scores_mlb="sports_feeds_boxscores_mlb"
            class="tab"
          >
          </component>

          <component
            v-if="currentTabComponent === 'tab-nfl'"
            v-bind:is="currentTabComponent"
            v-bind:props_league_data="sports_feeds_data"
            v-bind:props_league_data_nfl="nfl_feeds"
            v-bind:props_league_standings="standings"
            v-bind:props_nfl_playoffs="nfl_playoffs"
            v-bind:props_end_of_season="end_of_season[this.currentTab.toLowerCase()]"
            v-bind:props_box_game_scores_nfl="sports_feeds_boxscores_nfl"
            class="tab"
          >
          </component>

vue.js: 

data() {
    return {
      sports_feeds_boxscores_mlb: null,
      sports_feeds_boxscores_nfl: {
        sun: null,
        mon: null,
        thurs: null
      },
      sports_feeds_boxscores_nba: null,
        etc

/* Component Code */
// First let's get the Game and BoxScores Data
        const nflScores = async () => {
          this.nfl_feeds.sunday_data = await getScores(
            nflDate.sundayDate,
            config
          );

          this.nfl_feeds.thurs_data = await getScores(
            nflDate.thursdayDate,
            config
          );

          this.nfl_feeds.mon_data = await getScores(nflDate.mondayDate, config);

          // Next we need the gameid's to retrieve the game boxscores for each day
          this.nfl_feeds.sunday_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.sunday[index] = item.game.ID;
            }
          });

          this.nfl_feeds.thurs_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.thursday[index] = item.game.ID;
            }
          });

          this.nfl_feeds.mon_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.monday[index] = item.game.ID;
            }
          });

// Check if boxscores have been retrieved on previous tab click for each day
          // if not retrieve the boxscores
          this.sports_feeds_boxscores_nfl.sun =
            this.sports_feeds_boxscores_nfl.sun ||
            (await getBoxScores(nflGameIDs.sunday, url, params));


          this.sports_feeds_boxscores_nfl.thurs =

            (await getBoxScores(nflGameIDs.thursday, url, params));

          this.sports_feeds_boxscores_nfl.mon =
            this.sports_feeds_boxscores_nfl.mon ||
            (await getBoxScores(nflGameIDs.monday, url, params));

}; /* End nflScores Async function */

getBoxScores.js: 

try {
  const getBoxScores = async (gameIDs, myUrl, params) => {
    gameIDs.forEach(function(item) {
      promises.push(
        axios({
          method: "get",
          headers: {
            Authorization:
              "Basic &&*&&^&&=="
          },
          url: myUrl + item,
          params: params
        })
      );
    });

    // axios.all returns a single Promise that resolves when all of the promises passed
    // as an iterable have resolved. This single promise, when resolved, is passed to the
    // "then" and into the "values" parameter.
    await axios.all(promises).then(function(values) {
      boxScores = values;
    });
    console.log(`boxScores is ${boxScores.length}`)
    return boxScores;
  };

  module.exports = getBoxScores;
} catch (err) {
    console.log(err);
}

Я разделил все объекты sports_feeds_boxscores и в недоумении, почему они разделяют состояние ??? Извините за многословность вопроса, но это несколько сложно. Вот почему я предоставил сайт, где вы можете увидеть devtools, который, например, this.sports_feeds_boxscores_nfl.thurs имеет 14 элементов вместо одного после вызова API. А если щелкнуть вкладку mlb после вкладки nfl, то результаты mlb включают результаты nfl. Я был бы очень признателен за помощь в выяснении этого. Заранее спасибо ... Обновление: Я добавил getBoxScores.js, потому что мне кажется, что я возвращаю дополнительную статистику этого звонка.

1 Ответ

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

Это был мой плохой. Я не осознавал, что создал замыкание в getBoxScores.js: 

let boxScores = [];
let promises = [];

try {
  const getBoxScores = async (gameIDs, myUrl, params) => {
   gameIDs.forEach(function(item) {
      promises.push(
        axios({
          method: "get",
          headers: {
            Authorization:
              "Basic &&^^&^&&^FGG="
          },
          url: myUrl + item,
          params: params
        })
      );
    });

Перемещение объявлений внутри асинхронной функции быстро решило проблему. URRRRGGGHHH !!!

...