Vuejs - When should jquery plugins be initialized

Question

I have some jQuery plugins that need to be initialized, usually this can be done using $(document).ready(function () { }) , but this does not work when you do this in the vue components created event. With that in mind, I used this.$nextTick(function () { }) , but this does not seem to work with elements that are injected into the child component. For example, I do this:

 created: function () { this.$nextTick(function () { window.materialadmin.AppOffcanvas.initialize() }) } 

I have a button that is injected into a child component, but the onclick handler that is added above does not start. If I do this:

 setTimeout(function () { window.materialadmin.AppOffcanvas.initialize() }, 1000) 

Then my click handler will be linked and work.

At what point is the right point to bind my events so that I do not need to rely on setTimeout , which is a hack?

Answer 1

mounted or updated Lifecycle-Hooks should solve your problem, since mounted is called after the instance has just been installed, where el is replaced by the newly created vm. $ el and is updated after a data change causes the virtual DOM to redisplay and repair.