javascript - 如何通过 vue js 中的 slug(也存在于 json 文件中)从我的 json 文件中获取文章内容?
问题描述
我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
等等。
将不胜感激一些帮助。谢谢!
解决方案
你应该有这样的东西_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
在列表中是唯一的。
推荐阅读
- java - 在 jdbctemplate 的 queryforobject 方法中制作可滚动的结果集
- javascript - 反应表单钩子嵌套控制器名称不起作用
- python - Django:使用管理操作查询集扩展管理表单
- python - 根据日志消息类型登录到两个不同的文件
- pycharm - 如何在 pycharm IDE 中按文件名查找文件?
- android - 不尊重/抑制开关颜色 - 关闭 trackTint 颜色的效果 (OnColor)
- java - 自定义 HttpMessageConverter - configureMessageConverters / extendMessageConverters
- swift - 快速修复字符数、十进制数和“0”字符数
- excel - 形状的条件格式
- android - 上传服务器后 Zip 文件损坏,但在手机存储上下载和查看时,它工作正常。我在这里做错了什么?