Vue Meta - 填充动态数据值时标题无法正确显示

Question

我在我的博客的 Vue 应用程序中有一个非常基本的设置，其中有 /blog，这是我的博客列表 post，然后是 /blog/:slug，其中 slug 是个人 post 的日志（例如 mysite.com/blog/my-awesome-blog-post。我使用 vue-meta 作为元标记，一切都很好 - 除了个人博客的标签 posts. 我的设置是：

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（继vue-meta docs）

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

...
methods: {
    getPost() {
      const vm = this;
      butter.post
        .retrieve(this.$route.params.slug)
        .then(res => {
          vm.post = res.data;
          vm.metaDescription = vm.post.data.summary;
        })
        .catch(res => {
          console.log(res);
        });
    }
  },

问题是，当我转到博客 post 页面时，标题元标记仍然是 My Site | Blog Home，而不是 My Site | My Awesome Blog Post。如果我为 title 放入一个静态字符串，它就可以正常工作。而且，如果我在 Vue devtools 中检查 metaInfo() 函数返回的 object，它会显示具有适当值的 title。我做错了什么，或者这是一个错误？根据文档，这是 "easy"，但似乎并非如此。

Answer 1

正如我在 comment in the GitHub issue I filed 中指出的那样，我做了一个小改动，但它起作用了（实际上，有几个起作用了）。第一个是创建一个名为 metaTitle 的数据变量，将其填入 getPost()，然后在 metaInfo():

中使用它

data() {
    return {
      post: {},
      metaTitle: '',
      metaDescription: ''
    };
  },
  metaInfo() {
    return {
      title: this.metaTitle,
      meta: [
        { vmid: 'description', name: 'description', content: this.metaDescription}
      ]
    }
  },
 methods: {
    getPost() {
      const vm = this;
      butter.post
        .retrieve(this.$route.params.slug)
        .then(res => {
          vm.post = res.data.data;
          vm.metaTitle = vm.post.data.title;
          vm.metaDescription = vm.post.summary;
        })
        .catch(res => {
          console.log(res);
        });
    }
  },

然后我还尝试了另一种方法，将我的 post 对象缩小了一级：

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

并在 metaInfo() 中使用它：

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

也许问题在于 title 数据在一个对象中不能下降太多级别？不确定，但任何一种方法都有效。

Vue Meta - 填充动态数据值时标题无法正确显示

Vue Meta - Title not displayed properly when filled with dynamic data value

vue.js

meta-tags

vue-meta