I am experiencing an issue with updating meta descriptions using vue-meta in my articles. Despite attempting to fetch information from my API using async and mounted properties, the default meta descriptions set by Vue js are still being displayed instead of the desired ones for each article.
Here is a snippet of my code:
<script lang="ts">
import { Vue } from 'vue-property-decorator';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
export default class ArticleContent extends Vue {
article: any | null = null;
articlelist: any = null;
id = 1;
async mounted(): Promise<any> {
this.article = this.articlelist.find((f: any) => { <-- slug
return f.title_slug === this.$route.params.id;
});
this.articlelist = await this.asyncData();
}
async asyncData(): Promise<any> {
const articlelist = await this.$axios.get( <-- call to my api
'https://my_api...'
);
return articlelist.data.data;
}
metaInfo(): any { <-- meta information
return {
title: 'Article',
meta: [
{
hid: this.articlelist[0]._id,
name: this.articlelist[0].productNames['en'],
content: this.articlelist[0].metaDescription['en'],
},
],
};
}
}
</script>
Any assistance on resolving this issue would be greatly appreciated, thank you!