时间戳

首页 > 解决方案 > 访问单个 JSON 数组项并动态用于博客文章

arrays - 访问单个 JSON 数组项并动态用于博客文章

问题描述

我正在构建一个简单的 Nuxt JS 博客，blog.json其中包含一个包含博客文章数组的文件，其中包含：

我将很快附上这个格式。我知道如何遍历每个数组项并将其显示在页面上，并且我对Nuxt JS 中的动态路由也有基本的了解和一些基本经验。

我目前面临的问题是我需要能够访问单个数组项并将它们用作博客文章，例如：博客文章的标题pages/blog/_slug在哪里_slug，连字符+全部小写自动。

我想知道如何在我的示例中访问例如Winter 博客文章，并能够mysite.com/blog/winter-blog-post使用以下 JSON 格式：

{
  "blogs": [
    {
      "title": "Summer blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-14 10:08:00"
    }
    {
      "title": "Winter blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-15 10:08:00"
    },
    {
      "title": "Spring blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-16 10:08:00"
    }
  ]
}

我本质上希望能够访问mysite.com/blog/winter-blog-post并让它使用该特定数组项中的内容。

标签： arraysaxiosnuxt.js

解决方案

我假设您的页面设置正确并且可以到达/blog/_slug，因此实际上只需传递所需的参数并根据需要进行转换。在 blog.vue 中，您将拥有您的帖子列表，单击某些内容将导航到整篇文章。该点击事件将触发一个方法，您可以在其中操作标题并将其用作参数。因此，如果您有一个“阅读更多...”按钮，您将分配@click="readMore(blog.title)"给该按钮。

然后在您的方法中，您采用传递的“标题”参数，根据需要进行更改，并触发路线更改。

methods: {
  readeMore(title) {
    let passedTitle = title.toLowerCase()
    passedTitle = passedTitle.replace(" ", "-")
    this.$router.push('/blog/' + passedTitle)
  }
}

然后在您的 _slug.vue 中获取传递的参数，将其更改回来并使用它来查找您的文章。

export default {
     asyncData({params, $axios }) {
      let title = params.passedTitle.replace("-", " ")
      let oldTitle = title.charAt(0).toUpperCase() + title.slice(1)
        // make your query however you do, if with axios...
        $axios.get('/posts', {
          params: {
            title: oldTitle
          }
        })
    //or if its a vuex state item...
    //let post = this.$store.state.posts.find((p) => p.title === oldTitle)
      return post
    },
}

推荐阅读