如何通过 vue js 中的 slug从我的 json 文件中获取文章内容？

Question

我index.vue的文章中有链接（在 Nuxt 应用程序中）。当一篇文章被点击时，slug 被添加到 URL 中（这很好用）。单击文章链接时，我不知道如何从 JSON 文件中获取特定文章的内容。更像是我不知道如何在pages/ArticleContent/_id.vue.页面/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 Aarticle_id: 1title_slug: article-aarticle_content: This is content of article Aarticle_name: Article Barticle_id: 2title_slug: article-barticle_content: This is content of article Barticle_name: Article Carticle_id: 3title_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在列表中是唯一的。