vue mdl componentHandler.upgradeDom()返回不是函数

时间:2017-01-25 22:53:59

标签: javascript vue.js material-design-lite vuejs2

尝试将mdl实例化为vuejs项目(vue v2.1)。遇到与this非常相似的问题,除非我在mounted () { componentHandler.upgradeDom()}中致电App.vue,否则它将返回:

TypeError: _materialMin2.default.upgradeDom is not a function

此外,如果我在浏览器控制台中键入componentHander.upgradeDom(),它将执行预期而不会出错。如果挂载钩子中有console.log(componentHandler.upgradeDom()),则返回一个emtpy对象。尝试在挂载时添加this.$nextTick处理程序也无济于事。

导入material.js文件,如下所示:

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

尝试将其添加为全局,只需将其转储到index.html的脚本标记中,然后通过cdn加载,似乎无法正常工作。

为了便于阅读,这就是整个事情看起来减去不相关的东西:

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

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

此外,当我使用ready () {..}(旧学校vue)代替mounted () {...}时,它不会返回错误,但也不会正确更新每个元素。

1 个答案:

答案 0 :(得分:0)

根据反应中的类似问题找到了它的修复:基本上the webpack version of this,更改需要import componentHandler from 'exports?componentHandler!material-design-lite/material',并使用与之前相同的挂钩。

仍然遇到nextTick中的代码没有更新所有子组件元素的问题,但是将其全部移动到具有大多数错误元素的另一个子组件似乎已经有效。以前是App.vue