Estoy tratando de administrar mi sitio web actual usando Vue y más particularmente Vue Router. Como ya estoy usando Bootstrap, necesito algo de Javascript para administrar el estado de mis botones. El siguiente código solo funciona si comento la sección del 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>Si no lo comento me sale este error:
15:10 error 'update_nav_bar' is defined but never used Hasta ahora, eliminé muchas llamadas getElementById en mi código gracias a Vue. Así que supongo que hay una forma más elegante (y funcional...) de lograr lo que quiero, pero soy nuevo en Vue y no tengo ninguna visión retrospectiva. Podrías ayudar ?
Tienes que definir la función en el objeto de métodos. O, si usa la API de composición, devuelva la función desde la función de 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>Pero tal vez deberías repensar la función en general. Por lo general, puede lograr esto sin manipular el DOM manualmente con JavaScript.