Vue.js'openNav'已定义但从未使用过/'closeNav'已定义但从未使用过

Question

启动网站时，它会显示标题中提到的错误。

这里是HTML部分：

<span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">{{name1}}</a>
      <a href="#">{{name2}}</a>
      <a href="#">{{name3}}</a>
      <a href="#">{{name4}}</a>
      </div>

这是js部分：

//Vue App
  // eslint-disable-next-line
  var app = new Vue({
    el: '#app',
    data: {
      name1: 'name 1',
      name2: 'name 2',
      name3: 'name 3',
      name4: 'name 4'
    }
  })
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    }
  }

  //Navbar
  function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }

您可以看到，HTML代码中同时使用了closeNav和openNav。

Answer 1

Linter不够聪明，无法知道模板中使用了在全局范围内定义的功能；它仅考虑JavaScript代码，并且在代码中看不到这些功能的任何用法。

您可以通过在window对象上明确定义函数来使错误静音：

window.openNav = () => {
  document.getElementById("mySidenav").style.width = "250px";
};

window.closeNav = () => {
  document.getElementById("mySidenav").style.width = "0";
};