Vue Meta - заголовок не отображается должным образом при заполнении значениями Dynami c - PullRequest
Новая
       32

Vue Meta - заголовок не отображается должным образом при заполнении значениями Dynami c

1 голос
/ 22 марта 2020

У меня есть довольно базовая c настройка в моем приложении Vue для моего блога, где у меня есть /blog, который представляет собой список моих сообщений в блоге, а затем /blog/:slug, где slug - это слог для отдельный пост (например, 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 -метами документов ) 

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

Проблема в том, что когда я go перехожу на страницу поста в блоге, метатег заголовка по-прежнему My Site | Blog Home вместо My Site | My Awesome Blog Post. Если я добавлю строку stati c для title, он работает нормально. И, если я проверяю объект, возвращенный функцией metaInfo() в Vue devtools, он показывает title с соответствующим значением. Я делаю что-то не так, или это ошибка? Документы это "легко", но это не так.

1 Ответ

0 голосов
/ 23 марта 2020

Как отмечено в моем комментарии в проблеме GitHub, которую я подал , я внес небольшое изменение, которое сработало (на самом деле, была пара, которая сработала). Первым было создать переменную данных с именем 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 не могут быть слишком много уровней вниз в объекте? Не уверен, но в любом случае работает.

...