如何通过 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 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>&nbsp; <div>&nbsp; &nbsp; <div v-if="article">&nbsp; &nbsp; &nbsp; <h1>{{article.title_slug}}</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-else></div>&nbsp; </div></template><script>import articles_service from '../assets/example_all_articles.json'export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; article_list: articles_service.data.guides,&nbsp; &nbsp; &nbsp; article: null&nbsp; &nbsp; }&nbsp; },&nbsp; asyncData({ params }) {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; id: params.id&nbsp; &nbsp; }&nbsp; },&nbsp; watch: {&nbsp; &nbsp; id: {&nbsp; &nbsp; &nbsp; immediate: true,&nbsp; &nbsp; &nbsp; handler(id) {&nbsp; &nbsp; &nbsp; &nbsp; if (id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.article = this.article_list.find(f => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return f.title_slug === this.id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}</script>确保它们title_slug在列表中是唯一的。