Использование vue-meta с вычисляемыми свойствами
Я пытаюсь добавить динамические метатеги на страницу моей статьи. Статьи хранятся в магазине 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(). Поскольку компонент возвращает динамические статьи, как я могу получить доступ к отфильтрованной статье в вычисляемом свойстве?
Спасибо за вашу помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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)
})
@Psidom Я использую vue-meta для динамического обновления application / ld + json для "богатой карты Google". Я вижу это при проверке элементов, интересно, есть ли способ обновить то же самое в источнике просмотра. Спасибо
Я сделал это, я просто неправильно написал, я отредактирую спасибо