Использование vue-meta с вычисленными свойствами

Question

Я пытаюсь добавить динамические метатеги на мою страницу статьи. Статьи хранятся в магазине VueX, и я использую вычисленное свойство, чтобы получить статью, которую я хочу отобразить:

computed: {
  article() {
   return this.$store.state.articles.filter(article => article.id == this.$route.params.id);
  }
}

Я использую vue-meta для этого (есть ли лучший способ сделать это? Я не использую Nuxt, поэтому у меня нет рендеринга на стороне сервера).

Правильный способ его использования:

metaInfo() {
  return {
    title: this.article.title,

    meta: [
     {property: 'og:title', content: this.article.title},
     {property: 'og:site_name', content: 'Website Name'},
     {property: 'og:type', content: 'website'},
     {property: 'og:url', content: 'url.com'},
     {property: 'og:image', content: this.article.image},
     {property: 'og:description', content: this.article.description},
     ]
   }
 }

Но это работает только если статья хранится в data(), Поскольку компонент возвращает динамические статьи, как я могу получить доступ к отфильтрованной статье в свойстве computed?

Спасибо за помощь

Answer 1

Вы должны назвать свое вычисленное свойство как articleтакже благодаря использованию @ssc-hrep2 find вместо filter вернуть соответствующий объект в массиве, так как filter возвращает массив:

computed: {
  article () {
    return this.$store.state.articles.find(article => article.id == this.$route.params.id)
  }
}

Или использовать mapState от vuex:

import { mapState } from 'vuex'

computed: mapState({
  article: state => state.articles.find(article => article.id == this.$route.params.id)
})