so I'm using vue-meta library to add meta tag to my vue project, and now I'm trying to add my meta from API response, this is what i got from API if i did console.log('response.data.data')
0:
meta_tags_content: "my content"
meta_tags_id: 3
meta_tags_properties: "my property"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
1:
meta_tags_content: "content"
meta_tags_id: 4
meta_tags_properties: "title"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
length: 2
I'm trying to add the meta_tags_content and meta_tags_properties to my vue meta tag function (https://www.npmjs.com/package/vue-meta), this is my meta tag function
export default {
name: 'App',
metaInfo () {
return {
title: 'Tiarapot',
meta: [
{
name: 'description',
content: 'Memang canggih (harus ganti)'
},
{
property: 'og:title',
content: 'Website Tiarapot (harus ganti)'
},
{
property: 'og:site-name',
content: 'Tiarapot'
},
{
property: 'og:type',
content: 'website'
},
{
name: 'robots',
content: 'index,follow'
}
]
}
},
}
and what I'm trying to do is to make it like this
export default {
name: 'App',
metaInfo () {
return {
title: 'Tiarapot',
meta: arrayOfConvertedresponse
}
},
}
how to convert those response of array to a meta structured object ?
expected result if i console.log(arrayOfConvertedresponse) is
[
{
property: "my properties",
content: "my content"
},
{
property: "title",
content: "content"
}
]
If you want to use responsive data in metaInfo, you'll need to assign the array to a data property and refer to it in the metaInfo function
export default {
name: 'App',
data: () => ({
arrayOfConvertedresponse: [] // define initial properties
}),
metaInfo () {
return {
title: 'Tiarapot',
meta: this.arrayOfConvertedresponse
}
},
async created () {
// load data from the API
const response = await axios.get("/api/meta-tags")
// map response to the appropriate format and assign to your data property
this.arrayOfConvertedresponse = response.data.data.map(meta => ({
property: meta.meta_tags_properties,
content: meta.meta_tags_content
}))
}
}