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

实际上，您应该使用以下方法定义函数：

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    openNav() {
      document.getElementById('mySidenav').style.width = '250px'
    },
    closeNav() {
      document.getElementById('mySidenav').style.width = '0'
    }
  }
}

然后您可以在代码中使用v-on:click来调用它们，例如：

<span v-on:click="openNav()" style="font-size:30px;cursor:pointer;"
      >&#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>

PS：您也可以使用@click代替“ v-on：click”

Answer 2

lint不够聪明，无法知道您在模板中使用了在全局范围内定义的功能；只是考虑使用JavaScript代码，而在代码中看不到这些功能的任何用法。

您可以通过在window对象上显式定义函数来使错误消失：

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

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

onclick是古老的；如今，我们通常通过在DOM元素上调用addEventListener()来连接事件侦听器。

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

2 个答案: