Javascript 使用具有计算属性的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（）

中时，它才起作用。由于组件返回动态项目，如何访问computed属性中的筛选项目

---

感谢您的帮助

您需要将您的计算属性命名为

文章

，也感谢@ssc-hrep2使用

查找

而不是

过滤器

返回数组中的匹配对象，因为

过滤器

返回数组：

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

或者使用

vuex

中的

mapState

：

import { mapState } from 'vuex'

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

---

我做到了，我只是拼错了我会编辑的谢谢you@Psidom我正在使用vue meta动态更新“google rich card”的application/ld+json，我可以在查看元素时看到它，我想知道是否有一种方法可以在视图源代码上更新相同的内容，谢谢