Trying to understand the process of passing a prop from parent to child components.
If I include the prop attribute with the #id within the child component tag, like Image cid="488484-49544894-584854", it functions correctly. However, I am interested in using the same cid in one place (the parent) - is this achievable?
Both the parent and child components feature identical mounted and data functions. The cid is transmitted to the contentDeliveryUrl for data retrieval.
App.vue
<template>
<div id="app" class="container" cid="7e4301de-9c6e-4fab-9e68-3031b94d662d">
<Images cid="same as parent div" />
<Video cid="same as parent div" />
<TextType cid="same as parent div" />
<Card cid="same as parent div" />
</div>
</template>
<script>
import axios from 'axios';
import Images from "./components/Images";
import Video from "./components/Video";
import TextType from "./components/TextType";
import Card from "./components/Card";
export default {
name: 'app',
props: ["cid"],
components: {
Images,
Video,
TextType,
Card
},
mounted() {
axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
// eslint-disable-next-line
this.content = amp.inlineContent(result.data)[0];
console.log(this.content)
}, error => {
console.error(error);
});
},
data() {
return {
contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
content: []
}
}
}
</script>
Image.vue
<template>
<div v-if="content.image">
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ["cid"],
name:'Images',
mounted() {
axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
// eslint-disable-next-line
this.content = amp.inlineContent(result.data)[0];
console.log(this.content)
}, error => {
console.error(error);
});
},
data() {
return {
contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
content: []
}
},
}
</script>
All components display undefined data in Vue Devtools.