Javascript 访问嵌套JSON以在Vue.JS组件中使用的正确方法是什么？

我有一个组件，它使用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
   -Joe/Time
   -Steve/Time
  Game 9
   -Kate/Time
   -Mark/Time

y2002
  Game 1
   -Art/Time

现在，根据我所走的路线，我想使用以下道具访问当年的数据：

  {
   "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"
      }

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

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

这些有意义吗？我的问题是，我无法将axios调用的结尾更新为{{year}之类的动态道具。最后，我可以在每一条路线上使用该方法，但只需将响应的结尾更改为所需的年份，但这似乎不利于重用，因此我认为在做蠢事之前，我会询问比我更聪明的人x

这是我的模板：

{{index}}
{{index.Name}/{{game[0].Time}

首先，您是否定义了

年度

道具：

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

---

Does

this.tds=响应.数据[年]不适合您的需要？嘿，谢谢，但当我这样做时，我得到一个错误：未处理的承诺拒绝引用错误：VueComponent中未定义年份。_callee$（TDsByYear.vue？973f:54）这是哪一行>this.tds=response.data[年份]；我可以通过以下操作访问数据：this.tds=response.data.y2002；这个问题是否存在于JSON的结构中？我需要能够在一个模板内更改y2002部件，如
<TDsByYear year='y2003'></TDsByYear>

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