手表中未定义Vue元信息

Question

我正在当前代码中插入vue元逻辑，当触发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

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

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

演示