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的方式是通过游戏。

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的末尾更改为所需的年份，但这似乎与可重用性背道而驰，因此我认为在做一些愚蠢的事情之前，我会问比我更聪明的人。：x

这是我的模板：

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

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

1 个答案: