0

我正在尝试将动态元标记添加到我的文章页面。文章存储在 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(). 由于组件返回动态文章，我如何访问计算属性中的过滤文章？

谢谢你的帮助

4

1 回答 1

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)
})
于 2018-11-21T15:08:56.820 回答