如何在vue js中调用axios后更新标题

Question

我有一个产品页面，在那里我传递产品id&基于此，我称之为rest Api&在Api响应后，我需要用产品名称更新标题标签。我可以更新title标签，但在视图源中，我得到的值是未定义的或默认值。所以如何在一开始更新标题，以便在视图源中获得产品名称。所以这将是SEO友好。

export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
setTitle: {}
}
},
created () {
axios.get('https://apiurl.com/testing.json')
.then((response) => {
this.setTitle = response.data            
})
},
metaInfo() {
return {
title: `${this.setTitle.product_name} product name`,
meta: [
{
vmid: "description",
name: "description",
content:
"hello world, this is an example of adding a description with vueMeta"
}
]
}
}
}

如果在我的项目中SSR是假的，有可能吗

Answer 1

您应该使用nuxt提供的asyncData挂钩，该挂钩在创建页面之前运行(您不需要在data选项中定义setTitle(，并用head:替换metaInfo

export default{
name: 'App',
components: {
HelloWorld
},
async asyncData() {
const {data} = await  axios.get('https://apiurl.com/testing.json')
return { setTitle:data} // without defining data option
},
head() {
return {
title: `${this.setTitle.product_name} product name`,
meta: [
{
vmid: "description",
name: "description",
content:
"hello world, this is an example of adding a description with vueMeta"
}
]
}
}
}