I'm facing an issue related to communication between parent and child components in Vue. The problem arises when I navigate to a component, triggering an AJAX call to fetch data from the server. Despite receiving the data successfully, the parent component fails to pass it down to the child components via props. Interestingly, the child components only display the props data after I make changes in my code editor.
Here's the code snippet for my parent component:
<template>
<div id="single-product-container">
<product-header :name="singleProductName" :details="singleProductDetail" />
<product-spec :spec="singleProductSpec" />
</div>
</template>
<script>
import SingleProductHeader from '@/pages/SingleProductPage/single-product-header'
import SingleProductSpec from '@/pages/SingleProductPage/single-product-spec'
import singleProductApi from '@/api/product.api'
export default {
data () {
return {
singleProductData: null,
singleProductDetail: [],
singleProductName: '',
singleProductSpec: null
}
},
methods: {
getAllSingleProductDetail () {
const productName = this.$route.params.product
const location = this.location || 'jakarta'
let vehicleType = null
const path = this.$route.fullPath
let self = this
if (path.includes('motorcycle')) {
vehicleType = 'motorcycle'
} else if (path.includes('car')) {
vehicleType = 'car'
}
singleProductApi.getSingleProductRequest(location, productName, vehicleType)
.then(singleProductResponse => {
console.log(singleProductResponse)
let specObj = singleProductResponse.specification
self.singleProductDetail = singleProductResponse.detail
self.singleProductName = singleProductResponse.product_name
self.singleProductSpec = specObj
self.singleProductData = singleProductResponse
})
.catch(error => {
throw error
})
}
},
mounted () {
document.title = this.$route.params.product
},
created () {
this.getAllSingleProductDetail()
},
components: {
'product-header': SingleProductHeader,
'product-spec': SingleProductSpec
}
}
</script>
Next, here is the single-product-spec component that encounters issues with loading the props data:
<template>
<div id="product-spec">
<div class="product-spec-title">
Spesifikasi
</div>
<div class="produk-laris-wrapper">
...
</div>
</div>
</template>
<script>
export default {
props: {
location: String,
spec: Object
},
data () {
...
},
methods: {
openSpaceTab (evt, tab) {
...
}
},
created () {
this.mesinData = this.spec.mesin
this.rangkaData = this.spec.rangka
this.dimensiData = this.spec.dimensi
this.kapasitasData = this.spec.kapasitas
this.kelistrikanData = this.spec.kelistrikan
}
}
</script>
The issue lies within my single-product-spec component which fails to load the props data unless I modify the code in my text editor. This unusual behavior was discovered during debugging sessions, where altering the code in the single-product-spec component triggers the loading of props data. Without these modifications, the props data remains unloaded regardless of the waiting time.