在Vue中打印Json文件中包含详细信息的页面

Question

我能够循环并打印来自本地json文件games.json的所有数据，如下所示：

{
  "games": [
  {
    "id": 1,
    "slug": "foo",
    "title": "The Foo Game",
    "image": "/img/games/Foo",
  },
  {
    "id": 2,
    "slug": "bar",
    "title": "The Bar Game",
    "image": "/img/games/Bar.png",
  },
  {
    "id": 3,
    "slug": "hello",
    "title": "The Hello Game",
    "image": "/img/games/Hello",
  },
  {
    "id": 4,
    "slug": "world",
    "title": "The World Game",
    "image": "/img/games/World",
  }
]}

在v-for循环中的列表页中，我给他们都提供了一个slug链接到他们的详细页面(GameDetail.vue)：

<template>
  <div>
     <div v-for="game in games" :key="game.id">
      <div v-bind:style="{ backgroundImage: 'url(' + game.image + ')' }"></div>
      <router-link :to="`/${$i18n.locale}/games/` + game.slug + `/`" >
          <div>
            <p v-html="game.title"></p>
          </div>
      </router-link>
    </div>
  </div>
</template>
<script>
  import json from '../../assets/data/games.json'
  export default {
    data() {
      return {
        games: json.games,
      }
    }
  }
</script>

但我无法打印细节。我应该如何设置GameDetail.vue来打印一个游戏，比如路径是/en/game/foo还是/en/game/bar

编辑

这是我对GameDetail.vue的尝试

<template>
<div>
  <div v-for="game in getData($route.params.slug)" :key="game.slug">
    {{ game.title }}
    {{ game.image }}
  </div>
</div>
</template>

<script>
  import json from '../../assets/data/games.json'
  export default {
    props: ['slug'],
    data() {
      return {
        games: json,
        playerOptions: {
          // videojs options
          muted: false,
          language: 'en',
          height: '600',
          volumeControl: false,
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "/mov/CockroachRacers.mp4"
          }],
          poster: "/mov/CockroachRacers.jpg",
        },
      }
    },
    methods: {
    getData(slug) {
      let data = this.games
      data.filter(item => {
        return item.slug == slug
      })
      }
    }
  }
</script>

Answer 1

我就是这么干的：

我增加了一种方法

methods: {
    filteredGame(slug) {
        return this.games.filter(game => game.slug === slug)
      }
}

并在模板中添加了一个v-for。

<div v-for="game in filteredGame(slug)" :key="game.id">
    <p v-html="game.title"></p>
    <p>{{ game.slug }}</p>
    <p>{{ game.image }}</p>
</div>