Vue metaInfo 在手表中未定义

Question

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

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);
      });
    },

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

Answer 1

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

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

demo

Vue metaInfo 在手表中未定义

Vue metaInfo undefined in watch

javascript

vue.js

vue-meta