Title tag not set using dynamic data in component

[wonder95]

According to the docs,it is "easy" to set the title value with dynamic component data. Following those docs, I have the following setup:

App.vue

export default {
  metaInfo: {
    title: 'My Great Website Title,
    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' }
  ]
}

Blog.vue (/blog)

export default {
  metaInfo: {
    title: 'Blog Home'
  },

BlogPost.vue (/blog/:slug)

export default {
data() {
  post: {},
  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);
        });
    }
  },

The proper tag is set at /blog/: My Website | Blog Home. However, at a specific blog post (e.g. /blog/my-blog-post), the title is still Blog Home, and not the My Blog Post title. And, if I inspect the object returned by the metaInfo() function in the Vue devtools, it shows title with the appropriate value. However, if I set title as a static string, it is populated (that defeats the whole purpose of using dynamic data, but it just illustrates that it's specific to dynamic data).

[wonder95]

In true rubber duck fashion, after submitting this, I got the idea to do what I did with the description above, so even though I was using post, which was defined in data(), I defined a metaTitle value, and then filled that and used it in metaInfo():

data() {
    return {
      post: {},
      metaTitle: '',
      metaDescription: ''
    };
  },
  metaInfo() {
    return {
      title: this.metaTitle,
      meta: [
        { vmid: 'description', name: 'description', content: this.metaDescription}
      ]
    }
  },

and it worked. I then also tried another twist and made my post object one level smaller:

.then(res => {
          vm.post = res.data.data;
          vm.metaTitle = vm.post.data.title;
          vm.metaDescription = vm.post.summary;
        })

and used it in metaInfo():

metaInfo() {
    return {
      title: this.post.title,
      meta: [
        { vmid: 'description', name: 'description', content: this.metaDescription}
      ]
    }
  },

and that worked as well. What that tells me is that for some reason, the value that is used for metaInfo can't be too many levels deep in an object; in this case, posts.data.title was too deep, but post.title worked fine. Just my thoughts.

[pimlie]

can't be too many levels deep in an object

This is most likely due to this reactivity caveat: https://vuejs.org/v2/guide/reactivity.html#For-Objects

[stale]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.