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

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

0 голосов
/ 21 ноября 2018

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

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

Я использую для этого vue-meta (есть ли лучший способ сделать это? IЯ не использую 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().Поскольку компонент возвращает динамические статьи, как я могу получить доступ к отфильтрованной статье в вычисляемом свойстве?

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

1 Ответ

0 голосов
/ 21 ноября 2018

Вы должны назвать свое вычисленное свойство как 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)
})
...