Как правильно получить доступ к вложенному JSON для использования в компонентах Vue.JS?

Question

У меня есть компонент, который использует axios для получения данных из файла JSON.

  export default {
  name: 'TDsByYear',
  props: ['year'],
  data: function () {
    return {
      tds: [],
      games: [],
  }
  },
  methods: {
    async getTDs () {
      const response = await axios.get('../../static/td-data.json'); 
      this.tds = response.data.y2002; // How do I make y2002 settable using <TDsByYear year='y2002'></TDsByYear> so i can use y2003 etc...
      console.log(response.data.y2003)
    }
  },
  beforeMount(){
    this.getTDs()
  }
}

Файл JSON выглядит следующим образом:

  {
   "y2001": {
   "Game 8": [
      {
         "Name": "Joe"
         "Time": "80s"
      },
      {
         "Name": "Steve"
          "Time": "70s"
      }
      ],
   "Game 9": [
      {
         "Name": "Kate",
         "Time": "90s"
      },
      {
         "Name": "Mark"
          "Time": "100s"
      }
      ]
  },

   "y2002": {
      "Game 1": [
    {
         "Name": "Art",
         "Time": "120s"
      }

Как мне нужно отобразить JSON от Game.

y2001
  Game 8
   -Joe/Time
   -Steve/Time
  Game 9
   -Kate/Time
   -Mark/Time

y2002
  Game 1
   -Art/Time

Теперь, в зависимости от того, по какому маршруту я иду, я бы хотел получить доступ к данным за этот год с помощью реквизита, подобного этому:

<TDsByYear year='y2003'></TDsByYear>

Мне просто нужно обновить вызов axios примерно так:

this.tds = response.data.{{year}};

Имеет ли это смысл? Моя проблема в том, что я не могу обновить завершение вызова axios динамической подпоркой вроде {{year}}. В конце я могу просто поместить метод на каждом маршруте, но просто изменить конец response.data на необходимый год, но это, казалось, идет вразрез с возможностью повторного использования, поэтому я решил попросить более умных людей, чем я, прежде чем делать что-то глупое. : Х

Вот мой шаблон:

<div class="TDsByYear-wrapper">
  <div v-for="(game,index) in year" class="game-wrapper">
      <div class="game-number">{{index}}</div>
    <div class="all-tds-wrapper">
      <div v-for="(index) in game" class="touchd-wrapper">
          {{index.Name}} / {{game[0].Time}}
    </div>
  </div>
</div>

Answer 1

Прежде всего, вы определяете year опору:

<TDsByYear year='y2003'></TDsByYear>

... внутри вашего компонента vue вот так?

exports = {
     props: ['year'],
     data() {
          return { . . . }
     }
.
.
.
}