javascript - 如何通过vue js中的slug(也存在于json文件中)从我的json文件中获取文章内容？

Question

我的文章的 index.vue 中有链接(在 Nuxt 应用程序中)。当点击一篇文章时，slug 就会添加到 URL 中(这很好用)。我不知道当单击文章链接时如何从 JSON 文件中获取特定文章的内容。更像是我不知道如何在 pages/ArticleContent/_id.vue 中获取特定文章的内容。

pages/index.vue

<template>
<div>
<h1> The Article Hub </h1>
    <div class="list_article">
        <div v-for="article in article_list" :key="article.title_slug">
            <nuxt-link :to="'/ArticleContent/' + article.title_slug">
                {{article.article_name}}
            </nuxt-link>
        </div>
    </div>
</div>
</template>

<script>
import example from '../assets/example_all_articles.json';

export default {
    data () {
    return {
        article_list: example.data.guides,
    }
    }
  }
</script>

我的 JSON 文件包含如下内容:

article_name: Article A
article_id: 1
title_slug: article-a
article_content: This is content of article A

article_name: Article B
article_id: 2
title_slug: article-b
article_content: This is content of article B


article_name: Article C
article_id: 3
title_slug: article-c 
article_content: This is content of article C

等等。

希望得到一些帮助。谢谢!

Answer 1

您应该在 _id.vue 上有类似的内容

<template>
  <div>
    <div v-if="article">
      <h1>{{article.title_slug}}</h1>
    </div>
    <div v-else></div>
  </div>
</template>

<script>
import articles_service from '../assets/example_all_articles.json'

export default {
  data() {
    return {
      article_list: articles_service.data.guides,
      article: null
    }
  },
  asyncData({ params }) {
    return {
      id: params.id
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(id) {
        if (id) {
          this.article = this.article_list.find(f => {
            return f.title_slug === this.id
          })
        }
      }
    }
  }
}
</script>

确保 title_slug 在列表中是唯一的。