函数已定义但从未在 Vue 组件的脚本部分中使用

Question

我正在尝试使用 Vue 管理我当前的网站，尤其是 Vue Router。因为我已经在使用 Bootstrap，所以我需要一些 Javascript 来管理按钮的状态。以下代码仅在我评论 script 部分时才有效。

<template>
    <div class="container">
          <header class="d-flex justify-content-center py-3 border-bottom">
              <ul class="nav nav-pills" id="navbar_nav">
                  <li class="nav-item"><router-link to="Add" type="button" class="nav-link" onclick="update_nav_bar(this);">Add</router-link></li>
                  <li class="nav-item"><router-link to="Edit" type="button" class="nav-link" onclick="update_nav_bar(this);">Edit</router-link></li>
              </ul>
          </header>
  </div>
  <router-view/>
</template>

<script>
let navbar_nav = document.getElementById("navbar_nav");
function update_nav_bar(elem) {
    navbar_nav.getElementsByClassName("active")[0].classList.remove("active");
    elem.classList.add("active");
}
</script>

如果我不评论它，我会得到这个错误：

15:10  error  'update_nav_bar' is defined but never used

到目前为止，由于 Vue，我在代码中删除了很多 getElementById 调用。所以我想有一种更优雅（和工作......）的方式来实现我想要的，但我是 Vue 的新手并且没有任何后见之明。你能帮忙吗？

Answer 1

您必须在方法对象中定义函数。或者 - 如果您使用组合 -api - return 来自 setup 函数的函数。

<script>
let navbar_nav = document.getElementById("navbar_nav");

export default {
  methods: {
    update_nav_bar(elem) {
      navbar_nav.getElementsByClassName("active")[0].classList.remove("active");
      elem.classList.add("active");
    }
  }
}
</script>

但也许您应该从总体上重新考虑该功能。通常，您无需使用 JavaScript.

手动操作 DOM 即可实现此目的

函数已定义但从未在 Vue 组件的脚本部分中使用

Function is defined but never used in the script section of a Vue component

javascript

vue.js

vue-router

vuejs3

vue-sfc