Vue-meta: metaInfo doesn't have an access to computed properties

Question

I'm using vue-meta to dynamically change my meta tags. I want to change it only on some particular pages.

I'm using metaInfo function and try to change, for example, a title. But data from my getter is undefined which is why I cannot change the title in meta tags. It seems like metaInfo function try to access data before the component actually has it.

Here is my code in the component:

<template>
...
</template>

<script>
 export default {
     metaInfo() {
       return {
         title: this.getViewPage.data.meta.title, // data is undefined
    };
  },
  created() {
     this.loadViewPage();
  },
  computed: {
     ...mapGetters(['getViewPage']),
  },
  methods: {
     ...mapActions(['loadViewPage']),
};
</script>

Airily

Answer 1

vue-meta just creates computed property from your metaInfo function (according to plugin source code), so I assume that your loadViewPage action fills data object asynchronously and your problem just transforms to null-checking problem.

So you should check data before using its properties, and when data will be loaded metaInfo will update object as well:

     metaInfo() {
         // don't know your return object structure, 
         // maybe you should check whole this.getViewPage
         let data = this.getViewPage.data; 
         return {
             title: data ? data.meta.title : "some placeholder title",
         }
     };

Klink

Thank you very much! This solution works. I also checked my getter and created a new one in order to save meta data in a different store. – Airily