Vue.js Vue元标题-填充动态数据值时未正确显示

我在我的Vue应用程序中为我的博客设置了一个非常基本的设置，其中我有

/blog

，这是我的博客文章列表，然后是

/blog/：slug

，其中slug是个人文章的slog（例如，

mysite.com/blog/my awesome blog post

。我正在使用

vue meta

作为meta标记，除了单个blog post的标记之外，所有东西都很好用。我的设置是：

App.vue

export default {
  metaInfo: {
    title: 'Building great web experiences',
    titleTemplate: 'My Website | %s',
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'description', content: 'The website for my organization' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ]
}

Blog.vue

export default {
  metaInfo: {
    title: 'Blog Home'
  },

BlogPost.vue（遵循以下步骤）

问题是，当我转到博客文章页面时，title metatag仍然是

我的站点| blog Home

，而不是

我的站点|我很棒的博客文章

。如果我为

title

输入一个静态字符串，它就可以正常工作。如果我检查

metaInfo（）返回的对象

函数在Vue devtools中，它用适当的值显示

title

。我是做错了什么，还是这是一个bug？根据文档，这很“容易”，但似乎不是这样。

正如我在我的文档中所指出的，我做了一个小的更改（实际上，有几个成功了）。首先是创建一个名为

metaTitle

的数据变量，将其填入

getPost（）

，然后在

metaInfo（）

中使用该变量：

然后，我还尝试了另一个扭曲，将我的post对象缩小了一个级别：

.then(res => {
  vm.post = res.data.data;
  vm.metaTitle = vm.post.data.title;
  vm.metaDescription = vm.post.summary;
})

并在metaInfo（）中使用它：

也许问题是

标题
数据不能在对象中有太多的级别？不确定，但任何一种方法都有效。
正如我在文章中提到的，我做了一个小的更改（事实上，有几个成功了）。第一个是创建一个名为
metaTitle
的数据变量，将其填入
getPost（）
，并在
metaInfo（）中使用它：

然后，我还尝试了另一个扭曲，将我的post对象缩小了一个级别：

.then(res => {
  vm.post = res.data.data;
  vm.metaTitle = vm.post.data.title;
  vm.metaDescription = vm.post.summary;
})

并在metaInfo（）中使用它：

也许问题在于
标题
数据不能在一个对象中处于太低的级别？不确定，但两种方法都有效

.then(res => {
  vm.post = res.data.data;
  vm.metaTitle = vm.post.data.title;
  vm.metaDescription = vm.post.summary;
})

metaInfo() {
  return {
    title: this.post.title,
    meta: [
      { vmid: 'description', name: 'description', content: this.metaDescription}
    ]
  }
},