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()中时，它才有效。由于组件返回动态文章，因此如何在计算属性中访问过滤的文章？

谢谢您的帮助

Answer 1

您需要将计算的属性命名为article，也要感谢@ ssc-hrep2使用find而不是filter来返回数组中的匹配对象，因为{{1 }}返回一个数组：

filter

或使用computed: { article () { return this.$store.state.articles.find(article => article.id == this.$route.params.id) } }中的mapState：

vuex

使用具有计算属性的vue-meta

1 个答案: