javascript - Trying to set Vue Meta page title using string + variable - Stack Overflow

admin管理员组

文章数量:1323323

I'm using Vue Meta as part of a blog application within a project using Nuxt JS 2.4.5

I'm having some trouble trying to set the title + a variable from data () and I'm not sure what I'm missing

I've tried multiple attempts at getting it to work, moving code around, using this setting it manually, nothing seems to work...

<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>

I've tried setting a variable within data () and using it statically.

Doing this should give me My Website: Blog: some title

What could I be missing here?

I'm using Vue Meta as part of a blog application within a project using Nuxt JS 2.4.5

I'm having some trouble trying to set the title + a variable from data () and I'm not sure what I'm missing

I've tried multiple attempts at getting it to work, moving code around, using this setting it manually, nothing seems to work...

<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>

I've tried setting a variable within data () and using it statically.

Doing this should give me My Website: Blog: some title

What could I be missing here?

• javascript
• vue.js
• nuxt.js
• vue-meta

Share Follow asked Mar 27, 2019 at 13:06 Ryan HRyan H 2,97555 gold badges5454 silver badges153153 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Try to use function instead of object for head. Change

head: {
  ...
},

to

head () {
  return {
    ...
  }
}

Instead of defining metaInfo as an object, define it as a function and access this as usual:

Post.vue:

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

your script

<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',
    ponents: { Post },
    data () {
      return {
        title: 'Example blog post'
      }
    }
  }
</script>

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

本文标签： javascriptTrying to set Vue Meta page title using stringvariableStack Overflow