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

Posted 2023-02-22

【中文标题】如何通过 vue js 中的 slug（也存在于 json 文件中）从我的 json 文件中获取文章内容？

【英文标题】：How can I get the article content from my json file through its slug(also present in json file) in vue js?

【发布时间】：2020-03-17 09:31:24

【问题描述】：

我的文章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

等等。

不胜感激。谢谢！

【参考方案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 在列表中是唯一的。