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

【问题标题】：Vue Meta - Title not displayed properly when filled with dynamic data valueVue Meta - 填充动态数据值时标题无法正确显示
【发布时间】：2020-07-02 21:26:00
【问题描述】：

我在我的博客的 Vue 应用程序中有一个非常基本的设置，我有 /blog，这是我的博客帖子的列表，然后是 /blog/:slug，其中 slug 是单个帖子的 slog（例如mysite.com/blog/my-awesome-blog-post。我使用 vue-meta 作为元标记，一切都很好 - 除了个别博客文章的标记之外的所有内容。我的设置是：

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' }
  ]
}

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

问题是，当我转到博客文章页面时，标题元标记仍然是My Site | Blog Home，而不是My Site | My Awesome Blog Post。如果我为title 输入一个静态字符串，它可以正常工作。而且，如果我在 Vue devtools 中检查 metaInfo() 函数返回的对象，它会显示具有适当值的 title。我做错了什么，还是这是一个错误？根据文档，这很“容易”，但看起来并非如此。

【问题讨论】：

标签： vue.js meta-tags vue-meta

【解决方案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);
        });
    }
  },

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

.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 数据不能在对象中向下太多级别？不确定，但无论哪种方式都有效。

【讨论】：