CODEWITHSUNDEEP
javascripthtmlcssvue.jsmaterialize
elbuenmitch
elbuenmitch

Reputation: 46

In which lifecycle method should I place the materialize dropdown menu initializer in Vue js?

from the materialize css docs. dropdown.html

As you can see in the materialize docs, using this on a plain html file is quite simple: paste the html somewhere in the body, and paste the js initializer on a script tag. It works fine.

I'm wondering how I can use this on a vue component? I'm talking a .vue file with template, script, style sections.

Upvotes: 1

Views: 110

Answers (2)

Ismoil Shifoev
Ismoil Shifoev

Reputation: 6001

You could try and call this code in one of Vue's lifecycle hooks (see this diagram to find out where exactly they're executed), you'll probably want to use mounted.

But keep in mind this isn't really a bulletproof solution. Vue may manipulate the DOM in different ways later and as such isn't necessarily compatible with Materialize. The best solution in these cases is always to find a framework-specific implementation of the components you're trying to use, e.g. Vue Material.

Upvotes: 2

Igor
Igor

Reputation: 809

I would advice you to include initialize function to mounted() {...} section of a .vue single file component to make sure all HTML tags already exist.

Upvotes: 1

Related Questions