As far as I know, you should not need events to pass data from parent to child.
All you need is, in the child component: props: ['theProp']
And when using the child component in the parent: <child :theProp="someData"></child>
Now, wherever in the parent you change someData
, the child component will react accordingly.
You don’t need events, you don’t need “watch”, you don’t need “ready”.
For example: after an AJAX call, in the parent’s “ready”, you load some data:
// at the parent component
data: function () {
return {
someData: {}
}
},
ready: function () {
var vm = this;
$.get(url, function(response) {
vm.someData = response;
});
}
Now, you do not need anything else to pass the data to the child. It is already in the child as theProp
!
What you really need to do is to have, in the child, something which reacts to data changes on its own theProp
property.
Either in the interface:
<div v-if="theProp.id > 0">
Loaded!
</div>
Or in JavaScript code:
// at the child component
computed: {
// using a computed property based on theProp's value
awesomeDate: function() {
if (!this.theProp || (this.theProp.length === 0)) {
return false;
}
if (!this.initialized) {
this.initCalendar();
}
return this.theProp.someThing;
}
}
Update 1
You can also, in the parent, render the child conditionally:
<child v-if="dataLoaded" :theProp="someData"></child>
Only set dataLoaded
to true when the data is available.
Update 2
Or maybe your issue is related to a change detection caveat
Maybe you’re creating a new property in an object…
vm.someObject.someProperty = someValue
…when you should do…
vm.$set('someObject.someProperty', someValue)
…among other “caveats”.
Update 3
In VueJS 2 you are not restricted to templates. You can use a render function and code the most complex rendering logic you want.
Update 4 (regarding OP’s edit 2)
Maybe you can drop ready
and use immediate
option, so your initialization is in a single place:
watch: {
someData: {
handler: function (someData) {
// check someData and eventually call
this.initCalendar();
},
immediate: true
}
}