admin管理员组

文章数量:1323157

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?

Share asked Mar 27, 2019 at 13:06 Ryan HRyan H 2,9755 gold badges54 silver badges153 bronze badges
Add a ment  | 

3 Answers 3

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