尝试使用 vue-meta
我不明白如何根据 XHR 响应设置标题。到目前为止,我有:
<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>
当我尝试设置
this.metaInfo.title = response.data.model_name;
出现错误:未捕获( promise 中)TypeError:无法设置未定义的属性“标题”
所以 this.metaInfo 是未定义的......
我需要我的头衔基于 XHR 请求的响应。
最佳答案
需要使用metaInfo
的函数形式并让它从 react 数据中获取更新
<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;
});
}
},
// ...
关于vue.js - VueJS 和动态标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51921546/