Question

我刚刚接管了一个基于Vue 1.0.26构建的项目，该项目使用MDL作为Node.js模块。最后一个版本（2年前）仍然可以在生产环境中使用，但是当我在本地重建应用程序时，它将返回此错误：

Select.vue:104 Uncaught (in promise) TypeError: Cannot read property 'hide' of undefined

在这行代码中：

document.querySelector('#' + this.name + '-select .mdl-js-menu').MaterialMenu.hide()

由于我不是Node / Vue Web开发环境的专家，所以到目前为止，这是我所知道的/我已经尝试过的：

出现此错误是因为在以下位置没有MaterialMenu实例可用那一点
该错误可在其他PC上复制
我检查了MDL 文档，在我看来菜单设置正确
我使用与所涉及的每个Node模块完全相同的版本设置了本地package.json，但出现了相同的错误。另外，我将应用程序的本地版本与生产环境中运行的版本进行了比较，它们是匹配的。

这是vue文件的内容：

<template>
  <div id="{{name}}-select" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label fill getmdl-select ">
    <input class="mdl-textfield__input" v-on:blur="blur" :disabled="disabled" type="text" readonly="{{!autocomplete}}" id="{{name}}"
          tabIndex="-1" data-val="" v-model="key | label" v-on:keyup="filter">
    <label for="{{name}}">
      <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
    </label>
    <ul for="{{name}}" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        <li v-for="option in optionsArray" class="mdl-menu__item"
      v-on:click="selected(option)"
      data-val="{{option.value}}"><span v-text="option.label | label"></span></li>
    </ul>
  </div>
</template>

这是代码的方法部分，其中包含导致错误的行：

methods: {
    selected: function (option) {
      if (option) {
        this.$set('key', option.label)
        this.$set('value', option.value)
        this.$set('lookupObject', option)
        this.optionsArray = lookup(this.options)
        document.querySelector('#' + this.name + '-select .mdl-js-menu').MaterialMenu.hide()
      } else {
        this.$set('lookupObject', undefined)
      }
    },
...
}

this.name等于'lang'。

目标是获得一个菜单来选择一种语言，但是这个Vue组件被多次使用来动态生成选项列表。

调试期间：

很明显，该元素不是实例，好像mdl-js-menu无法创建此代码的菜单
在执行导致错误的行之前，ul列表为空（尚无一个li标记）

我的考虑：

也许对MDL代码进行了一些更改，但是我尝试了许多不同的版本，但没有成功
也许是因为列表为空

你们中的任何人都遇到相同的错误吗？有什么我想念的吗？

谢谢

MaterialMenu实例不再起作用

0 个答案: