vue mdl componentHandler.upgradeDom() returning not a function

Question

Trying to instantiate mdl into a vuejs project (vue v2.1). Running into a very similar issue to this, except when I call mounted () { componentHandler.upgradeDom()} in my App.vue, it's returning:

TypeError: _materialMin2.default.upgradeDom is not a function

Furthermore, if I type componentHander.upgradeDom() in the browser console it'll do what's expected without error. If I console.log(componentHandler.upgradeDom()) in the mounted hook then it returns an emtpy object. Have tried adding a this.$nextTick handler on mounted as well to no avail.

Am importing the material.js file like so:

import componentHandler from 'material-design-lite/material.min.js'.

Tried to add it as a global as well just by dumping it in a script tag in index.html, and loading it by cdn, nothing seems to work properly.

For easy reading, this is what the whole thing looks like minus irrelevant stuff:

import componentHandler from 'material-design-lite/material.min.js'

export default {
  name: 'app',
  components: {
    ...
  },
  mounted () {
    this.$nextTick(() => {
      componentHandler.upgradeDom()
    })
  }
}

Also when I do it with ready () {..} (old school vue) instead of mounted () {...} it doesn't return the error, but also doesn't update each element correctly.

Does `componentHandler.upgradeDom();` depend on some template, if yes can you add that as well. — Saurabh, Jan 26 '17 at 03:36
Not sure what you mean...it's part of the material-design-lite library. As far as I can tell the point of it is to keep components updated. In my case, what isn't working (and the reason I need to call that method) is that floating labels above my inputs are disappearing after navigating from a different route, but work fine on a page load/refresh. updateDom (or a number of other componentHandler methods) are supposed to handle that. — Sofanisba, Jan 26 '17 at 04:39

score 0 · Answer 1 · edited May 23 '17 at 12:32

Found a fix for it based on a similar problem in react: basically did the webpack version of this, changed require to import componentHandler from 'exports?componentHandler!material-design-lite/material', and used the mounted hook same as before.

Still having an issue with code in nextTick not updating all child component elements, but moving all of it to another child component that had most of the buggy elements seems to have worked. Was formerly in App.vue.

vue mdl componentHandler.upgradeDom() returning not a function

1 Answers1