Доступ к отдельному элементу массива JSON и динамическое использование для сообщения блога - PullRequest
Новая
       35

Доступ к отдельному элементу массива JSON и динамическое использование для сообщения блога

0 голосов
/ 16 марта 2019

Я создаю простой блог Nuxt JS с файлом blog.json, содержащим массив сообщений в блоге, который содержит:

  • Заголовок (Строка)
  • Тело (разметка HTML)
  • Создание (Дата)

Я приложу формат этого в ближайшее время. Я знаю, как перебирать каждый элемент массива и отображать его на странице, а также у меня есть базовые знания и некоторый базовый опыт работы с динамической маршрутизацией в Nuxt JS .

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что мне нужно иметь возможность доступа к отдельным элементам массива и использовать их в качестве сообщений в блоге, например: pages/blog/_slug, где _slug будет заголовком сообщения в блоге с дефисами + все строчные автоматически.

Мне интересно, как я могу получить доступ к, например, Зимнему сообщению блога в моем примере и иметь возможность перейти на 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 и использовать его из этого конкретного элемента массива.

1 Ответ

0 голосов
/ 17 марта 2019

Я предполагаю, что ваши страницы настроены правильно, и вы можете достичь /blog/_slug, так что на самом деле это просто вопрос передачи необходимых параметров и преобразования их по мере необходимости.В blog.vue у вас будет список ваших постов, и щелчок по чему-либо приведет к полной статье.Это событие click вызывает метод, в котором вы можете манипулировать заголовком и использовать его в качестве параметра.Поэтому, если у вас есть кнопка «Подробнее ...», вы бы присвоили этой кнопке @click="readMore(blog.title)".

Затем в ваших методах вы берете переданный параметр '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
    },
}
...