尝试使用字符串+变量设置 Vue Meta 页面标题

Question

我在使用 Nuxt JS 2.4.5 的项目中使用 Vue Meta 作为博客应用程序的一部分

我在尝试设置标题 + 来自 data () 的变量时遇到了一些问题，我不确定我遗漏了什么

我尝试了多次尝试让它工作，移动代码，使用 this 手动设置它，似乎没有任何效果...

<script>
import BlogsFromJson from '~/static/articles/blogs.json';

export default {
  head: {
    title: 'My Website: Blog: ' + this.myBlogTitle, // or something else
    meta: [
      { hid: 'description', name: 'description', content: 'Read the latest news and articles from Flex Repay UK.' }
    ]
  },
  data () {
    return {
      title: this.$route.params.title,
      blog: BlogsFromJson,
      myBlogTitle: 'some title'
    }
  }
}
</script>

我试过在 data () 中设置一个变量并静态使用它。

这样做应该给我 My Website: Blog: some title

我可能在这里遗漏了什么？

Answer 1

不要将 metaInfo 定义为对象，而是将其定义为函数并像往常一样访问它：

Post.vue:

<template>
  <div>
    <h1>{{{ title }}}</h1>
  </div>
</template>

你的脚本

<script>
  export default {
    name: 'post',
    props: ['title'],
    data () {
      return {
        description: 'A blog post about some stuff'
      }
    },
    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    }
  }
</script>

PostContainer.vue:

<template>
  <div>
    <post :title="title"></post>
  </div>
</template>

<script>
  import Post from './Post.vue'

  export default {
    name: 'post-container',
    components: { Post },
    data () {
      return {
        title: 'Example blog post'
      }
    }
  }
</script>

Answer 2

尝试使用函数而不是对象作为头部。更改

head: {
  ...
},

至

head () {
  return {
    ...
  }
}

Answer 3

metaInfo() {
        return {
            title: this.pageTitle,
        }
    }

尝试使用字符串+变量设置 Vue Meta 页面标题

Trying to set Vue Meta page title using string + variable

javascript

vue.js

nuxt.js

vue-meta