Ошибка в data (): «Ошибка типа: this.game.league_person_result [0] не определена»

Question

Хотел бы сделать, если рендеринг свойств данных в vuejs2

Я пытался вставить данные или вычисленные свойства, но это не работает.

  data() {
    return {
      edit: false,
      leagueGameResult: {
        person_id: this.game.person.id,
        person_result: this.game.person_result,
        opponent_id: this.game.opponent.id,
        opponent_result: this.game.opponent_result,
        game_id: this.game.id,
        league_id: this.$route.params.id,
      },
      leagueGameResultEdit: {
        person_id: this.game.person.id,
        person_result: this.game.person_result,
        person_result_id: this.game.league_person_result[0].id ? this.game.league_person_result[0].id : null,
        opponent_id: this.game.opponent.id,
        opponent_result: this.game.opponent_result,
        opponent_result_id: this.game.league_person_result[1].id ? this.game.league_person_result[1].id : null,
        game_id: this.game.id,
        league_id: this.$route.params.id,
      },
    }
  },

Мне нужны данные, которые, если бы не существовали, все равно работали бы, потому что теперь их стек, когда данные не предоставляются.

Answer 1

Итак, ошибка предполагает, что this.game.league_person_result[0] равно undefined, что означает, что вы не можете получить доступ к его свойству id.Достаточно просто проверить, присутствует ли этот объект, прежде чем пытаться захватить id.

data() {
  const game = this.game
  const leagueId = this.$route.params.id
  const [league0, league1] = game.league_person_result

  return {
    edit: false,

    leagueGameResult: {
      person_id: game.person.id,
      person_result: game.person_result,
      opponent_id: game.opponent.id,
      opponent_result: game.opponent_result,
      game_id: game.id,
      league_id: leagueId
    },

    leagueGameResultEdit: {
      person_id: game.person.id,
      person_result: game.person_result,
      person_result_id: (league0 && league0.id) || null,
      opponent_id: game.opponent.id,
      opponent_result: game.opponent_result,
      opponent_result_id: (league1 && league1.id) || null,
      game_id: game.id,
      league_id: leagueId
    },
  }
},

Я попытался немного уменьшить дублирование, но можно сделать гораздо больше, учитываяleagueGameResult и leagueGameResultEdit почти одинаковы.

Я бы также предложил попытаться переместить league_id в подпорку вместо того, чтобы схватить его через this.$route.Vue Router позволяет вводить параметры маршрута в качестве реквизита.