CODEWITHSUNDEEP
javascriptjqueryvue.jsmaterializevuejs2
A_A
A_A

Reputation: 340

Initializing materialize elements in Vue.js

How can I initialize the Materializes' select or modal elements in Vue.js? When I add the following code in my document ready the elements do not work. 

<script> 

$(document).ready(function() {
  $('.modal-trigger').leanModal('open');
  $('select').material_select();
});

//Vue.js code here...   
 
</script>

Upvotes: 1

Views: 1032

Answers (1)

mzgajner
mzgajner

Reputation: 2348

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

Related Questions