Экземпляр MaterialMenu больше не работает

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()

AsЯ не специалист по среде веб-разработки Node / Vue, это то, что я знаю / я пробовал до сих пор:

• эта ошибка возникает из-за того, что в этот момент нет экземпляра MaterialMenu
• ошибка может быть воспроизведена на другом ПК
• Я проверил документацию по MDL и мне кажется, что меню настроено правильно
• Я настроил свой локальный package.json с точно такой же версиейкаждый задействованный модуль Node, но я получил ту же ошибку.Кроме того, я сравнил локальную версию приложения с запущенной в производстве, и они совпадают.

Это содержимое файла 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, но я пробовал много разных версийбез успеха
• возможно, это потому, что список пуст

Кто-нибудь из вас сталкивался с той же ошибкой?Что-то мне не хватает?

Спасибо