javascript - 手表中未定义的Vue metaInfo

Question

我在当前代码中插入 vue-meta 逻辑，似乎有一个问题在触发metaInfo时还不可用。watch

export default {
  metaInfo () {
    return {
      title: this.title,
      meta: [],
    }
  },
  watch: {
    article() {
      if (this.article) {
        this.generatedHtml = this.applySnippets();
      }
    },
  },
  computed: {
    article() {
      return this.$store.getters.CONTENT;
    },
    title() {
      if (this.article !== null) {
        return this.article.info.caption;
      }
      return '';
    },
  }
  created() {
    this.$store.commit('CLEAR_CONTENT');
    this.$store.dispatch('FETCH_CONTENT', { slug: this.slug, component: this });
  },
  methods: {
    applySnippets() {
      if (!this.article.snippets || this.article.snippets.length === 0) {
        return this.article.data.content;
      }
      this.article.snippets.forEach(snippet => {
        if (snippet.type === 'meta') 
          this.metaInfo.meta.push(snippet.object);
      });
    },

this.metaInfo在这个 Vue 生命周期阶段未定义的失败。该怎么办？

Answer 1

要访问metaInfoOptions API 中的结果，请使用this.$metaInfo（注意$前缀）：

if (snippet.type === 'meta')
  this.$metaInfo.meta.push(snippet.object);
       

演示