I have some JQuery plugins that need initialising, normally this could be done using $(document).ready(function () { })
but this doesn't appear to work when doing it within a vue components created
event. With this in mind, I've made use of this.$nextTick(function () { })
but this doesn't seem to work with elements that are introduced on child component. For instance, I do this:
created: function () {
this.$nextTick(function () {
window.materialadmin.AppOffcanvas.initialize()
})
}
I have a button which is introduced in a child component but the onclick handler this above code attaches doesn't trigger. If I do:
setTimeout(function () {
window.materialadmin.AppOffcanvas.initialize()
}, 1000)
Then my click handler will be bound and work.
At what point is the correct point to bind my events so that I don't need to rely on setTimeout
which is hacky?
mounted or updated Lifecycle-Hooks should solve your problem as mounted is called after the instance has just been mounted where el is replaced by the newly created vm.$el and updated is called after a data change causes the virtual DOM to be re-rendered and patched.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With