[1.0.0-alpha.3] TypeError: Cannot read property 'jquery' of null

I’m using MaterializeCSS + VueJS with Laravel Webpack.

Expected Behavior

Initializing the form when the component is loaded.

Current Behavior

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'jquery' of null"

Steps to Reproduce (for bugs)

//...
data() {
  return {
    modalId: 'modal-order'
  }
},
mounded() {
  this.init();
},
methods: {
  init() {
    let elem = document.querySelector(`#${this.modalId}`);
    this.instance = M.Modal.init(elem, {
        onOpenStart: () => {
            this.show();
        },
        onCloseEnd: () => {
            this.resetForm();
        }
    });
  }
}

Possible Solution

If you execute the code after jQuery is loaded, the error disappears:

//...
data() {
  return {
    modalId: 'modal-order'
  }
},
mounded() {
  this.init();
},
methods: {
  init() {
    $(document).ready(() => {
        let elem = document.querySelector(`#${this.modalId}`);
        this.instance = M.Modal.init(elem, {
            onOpenStart: () => {
                this.show();
            },
            onCloseEnd: () => {
                this.resetForm();
            }
        });
    });
  }
}

Your Environment

• Version used: 1.0.0-alpha.3
• Browser Name and version: All latest browsers (Google Chrome, Mozilla Firefox, Microsoft Edge, Opera)
• Operating System and version (desktop or mobile): Windows 10 Pro desktop, Windows 7 desktop.

[Dogfalo]

Try using https://vuejs.org/v2/api/#ref instead of query selector in Vue

[andrey-helldar]

Hmm … I did not think about it, thanks 😃