VueJS and dynamic titles - vue.js

Question

Trying to use vue-meta
I can't understand how to set title based on XHR response. So far I have:
<script>
export default {
name: 'Model',
data() {
return {
model: [],
}
},
metaInfo: {
title: 'Default Title',
titleTemplate: '%s - site slogan'
},
methods: {
getModels() {
window.axios.get(`/api/${this.$route.params.manufacturer}/${this.$route.params.model}`).then((response) => {
this.model = response.data;
this.metaInfo.title = response.data.model_name; // THIS NOT WORKING
});
}
},
watch: {
$route(to, from) {
if ( to.name === 'model' ) {
this.getModels();
}
},
},
created() {
this.getModels();
}
}
</script>
when I try to set
this.metaInfo.title = response.data.model_name;
Getting error: Uncaught (in promise) TypeError: Cannot set property 'title' of undefined
So this.metaInfo is undefined...
I need my title be based on response from XHR request.

Answer 1

You need to use the function form of metaInfo and have it get updates from reactive data
<script>
export default {
data() {
return {
title: "Default Title",
// ...
};
},
metaInfo() {
return {
title: this.title,
// ...
};
},
methods: {
getModels() {
window.axios.get("url...").then((response) => {
this.title = response.data.model_name;
});
}
},
// ...

Answer 2

I assume you call this.metaInfo.title = response.data.model_name; inside a method on the vue instance. The problem I see is that you should put the metaInfo object inside the return object from data(). Like this:
data() {
return {
model: [],
metaInfo: {
title: 'Default Title',
titleTemplate: '%s - site slogan'
},
};
},

Answer 3

Here is my solution:
I have a root component in my SPA app: App.vue with this code in it:
export default {
/**
* Sets page meta info, such as default and page-specific page titles.
*/
metaInfo() {
return {
titleTemplate(titleChunk) {
const suffix = "Marvin Rodank's dank site";
return titleChunk ? `${titleChunk} - ${suffix}` : suffix;
},
};
},
};
That sets up my default page title for all pages, and then after that, the answer by Stephen Thomas contains the key logic.
For all pages with static page titles, it's easy:
metaInfo() {
return { title: 'List examples' };
},
But dynamic page titles were more difficult, but still easy once you realize the page loads in two phases:
phase 1: browser displays the default page title
phase 2: page title is updated with the dynamic title
metaInfo() {
return {
title: this.example.name,
};
},
In the dynamic title example there, my child component fetches the object this.example from an API endpoint, so it is important to note that this.$metaInfo().title updates itself when this.example is populated.
You could test it with code such as this:
metaInfo() {
return {
title: this.example.name,
};
},
mounted() {
const obj = {
name: 'Sally',
age: 1337,
};
this.example = obj;
},