Materialize Select problem Meteor Vue

help
1

Uncaught TypeError: $(…).material_select is not a function

Recently I’ve tried Materialize with Vue2 and Meteor. However, I got a problem where i can’t initialize select

$('select').material_select()

this is my code

-HTML
        <div class="input-field">
            <select>
                <option value="test">Test</option>
            </select>
            <label for="">Materialize Select</label>
        </div>
-JS

export default {
   mounted(){
      $('select').material_select();
   }
}

thanks in advance!

2

Did you try $(this.$el).find('select')?

3

yeah i do but i still get the same problem

4

Does materialize even know that the select element belongs to it at this point ?

5

1356×354 8.78 KB

when i use select it display nothing but its label display. this because it not yet initialize. it seems like all materialize initialize like select, dropdown, modal … etc not working. i dont know why this is my set up

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
``
6

Did you consider using native Vue Material CSS libraries instead of JQuery one?

Like this: http://material-ui-vue.jackyang.me/docs/index.html#!/components/forms/select-field
or this: http://appcomponents.org/material-components/#!/forms/showcase

7

let me try this thanks you

8

Well, the first one seems to be just a wrapper around JQuery lib. The second is native with Materialize CSS styles. Both seem to work, so it’s up to you which to choose.