Attempting to integrate mdl into a vue.js project (using vue v2.1) and encountering a familiar issue to that discussed here. However, when I include
mounted () { componentHandler.upgradeDom()}App.vue, I am receiving the following error:
TypeError: _materialMin2.default.upgradeDom is not a functionInterestingly, if I type componentHander.upgradeDom() in the browser console, it works as expected without any errors. But when I
console.log(componentHandler.upgradeDom())this.$nextTick handler on mounted, but it did not resolve the issue.
The material.js file is imported like this:
import componentHandler from 'material-design-lite/material.min.js'I even tried adding it globally by inserting it in a script tag in index.html or loading it via CDN, but nothing seems to work correctly.
To simplify, here is the relevant code snippet:
import componentHandler from 'material-design-lite/material.min.js'
export default {
name: 'app',
components: {
...
},
mounted () {
this.$nextTick(() => {
componentHandler.upgradeDom()
})
}
}Additionally, using ready () {..} (old school vue) instead of mounted () {...} eliminates the error, but also fails to update each element correctly.