我正在尝试通过包含物化选择的玩笑来测试我的 vuejs 组件。 在执行组件测试时，materialize.js 中出现以下错误：
TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable
如何解决这个错误？
【问题讨论】：
*.tabIndex的代码吗？
material-select，包含此模板：<select><slot></slot></select>
标签： vuejs2 materialize
当输入字段未包含在具有类 input-field 的 div 中时，可能会发生此问题：
<div class="input-field">
<input type="text" class="autocomplete"></input>
</div>
添加一个带有“input-field”类的 div 可能会解决这个问题。
【讨论】：
使用 id 选择器代替类选择器。例如像这样调用下拉列表：
html：
<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
js:
$('#dropdowner').dropdown();
【讨论】：
考试1.❌
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
</ul>
考试2.✔️
<nav> <div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
</ul> </div> </nav> <ul id="name_target2" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> </ul>
【讨论】：
当我遇到这个问题时，我试图在 JS 中动态创建整个下拉列表。我的解决方法是在 HTML 中创建列表和任何默认列表元素：
<div id="select1" class=\"input-field col s12\">
<select>
<option value="" selected>Default</option>
</select>
<label>Test</label>
</div>
然后在 JS 中附加任何动态值：
contents.forEach(function(content) {
var buffer = "<option></option>";
var template = $(buffer);
$(template).text(content);
$("select1").find("select").append(template);
});
$("select").formSelect();
【讨论】：
pre 1.0.0 你会使用 data-activates，如果 data-target 没有指定你会得到这个错误
【讨论】：
我的问题是，jQuery 对象尚未附加到 DOM，因此由于无法通过 ID 查找元素，内部实现代码无法初始化元素：
// materializecss initing dropdown (in my case for input autocomplete), where `t` is the input element
i.id = M.getIdFromTrigger(t),
i.dropdownEl = document.getElementById(i.id),
i.$dropdownEl = h(i.dropdownEl),
M.getIdFromTrigger(t) 返回了一些随机 ID（不是我提供的那个），dropdownEl 初始化为 null，后来方法 _makeDropdownFocusable 使用它失败 `this.dropdownEl.tabIndex = 0
所以我的问题代码如下所示：
let root = $('#root'); // root in the DOM already
let wrapper = $('<div>'); // wrapper is just created and NOT attached to the DOM yet
let input = $('<input>').appendTo(wrapper); // creating input and attaching to the wrapper, but still not in DOM
initAutocomplete(input) // M.Autocomplete.init logic here FAILS
root.append(wrapper) // too late, error above
因此，快速解决方法是先附加元素，并且仅比 M.Autocomplete.init 附加元素
【讨论】：
我在 Vue 项目中使用 Materializecss 时也偶然发现了这个问题。正如 sajjad 所提到的，使用 id 选择器而不是类工作。但是，这是初始化多个下拉菜单的问题，因为每个下拉菜单必须有唯一的 ID。
我解决这个问题的方法是选择所有带有“.dropdown-trigger”类的元素，并初始化每个元素。它对我有用。
$.each($('.dropdown-trigger'), function(index, value) {
$(value).dropdown();
});
【讨论】：