在 Vue.js 中初始化物化元素

Question

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>

Answer 1

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, eg Vue Material .