Question

我正在尝试通过包含实现实体化选择的玩笑来测试我的vuejs组件。执行组件测试时，在materialize.js中出现以下错误：

TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable

如何解决此错误？

Answer 1

当输入字段没有用类input-field包裹在div中时，可能会发生此问题：

  <div class="input-field">
    <input type="text" class="autocomplete"></input>
  </div>

添加带有“输入字段”类的div可能会解决此问题。

Answer 2

只能使用一次。
data-target =“ name_target” 不能重复

考试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>

Answer 3

使用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();

Answer 4

在我的Vue项目中使用Materializecss时，我也偶然发现了这个问题。如sajjad所述，使用id选择器代替类工作。但是，这对于初始化多个下拉列表是个问题，因为每个下拉列表必须具有唯一的ID。

我解决这个问题的方法就是选择所有带有'.dropdown-trigger'类的元素，并对每个元素进行初始化。它对我有用。

$.each($('.dropdown-trigger'), function(index, value) {
        $(value).dropdown();
});

Answer 5

当我遇到这个问题时，我试图在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();

Answer 6

在1.0.0之前的版本中，您将使用数据激活，如果未指定数据目标，则会出现此错误

实现：无法在Dropdown处将属性'tabIndex'设置为null._makeDropdownFocusable

6 个答案: