Попытка установить заголовок страницы Vue Meta, используя строку + переменную - PullRequest
Новая
       19

Попытка установить заголовок страницы Vue Meta, используя строку + переменную

0 голосов
/ 27 марта 2019

Я использую Vue Meta как часть блогового приложения в проекте, использующем Nuxt JS 2.4.5

У меня возникли проблемы при попытке установить заголовок + переменную из 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

Чего мне здесь не хватает?

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Попробуйте использовать функцию вместо объекта для головы. Изменить 

head: {
  ...
},

до 

head () {
  return {
    ...
  }
}
0 голосов
/ 27 марта 2019

Вместо определения 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>
...