I have a scenario where I need to pass data from a parent component to a child component as props. The parent component's data is fetched via an ajax call.
I have tried a couple of solutions, but they are not working as expected. Can you help me identify the error in my approach?
I also need to ensure that the props are correctly passed from the parent to the child component and its nested children.
Here are the attempts I have made:
When I do not use the
'v-if'directive, I receive an error stating that the:queryis being passed as null.Even after using
v-ifand updating the rendering, the child component remains empty and does not react to changes in the data.I also tried to initialize the query data as computed without using the v-if directive, as it seemed like a simple caching solution.
Additionally, I attempted to emit an event using a bus, but the child component did not react to it.
Finally, I tried making the component reactive by using a
:keyattribute with a value like:key="ready", but it did not have any effect.
Template:
<template>
<div v-if="isLoaded()">
<input>
<metroline></metroline>
<grid :query="query"></grid>
</div>
</template>
Script:
export default {
data() {
return {
ready : false,
query : null
}
},
components : {
metroline : Metroline,
grid : Grid
},
methods: {
isLoaded() {
return this.ready
},
firstQuery( uid, limit, offset) {
var url = // my url
// using Jquery to handle cross origin issues, solving with jsonp callback...
return $.ajax({
url : url,
dataType: 'jsonp',
jsonpCallback: 'callback',
crossDomain: true
})
}
},
created() {
var vm = self;
this.firstQuery(...)
.then(function(data){
this.query = data;
console.log('firstQuery', this.query);
// attempts to pass through the query
// bus.$emit('add-query', this.query);
this.ready = true;
self.isLoaded(); // using a self variable, temporarily, jquery deferred messed up with this; however the this.query of vue instance is properly updated
})
}
}