Estoy tratando de eliminar todas las clases dentro de un elemento principal, la estructura se parece a la siguiente
<div id="middleCol"> <section class="toggleSection" id="step1" v-on:click="toggleStep($event)" ref="step1"> <small>Step 1</small> <h5>Flight Details</h5> </section> <section class="toggleSection" id="step2" v-on:click="toggleStep($event)" ref="step2"> <small>Step 2</small> <h5>Traveler Info</h5> </section> <section class="toggleSection" id="step3" v-on:click="toggleStep($event)" ref="step3" > <small>Step 3</small> <h5>Payment</h5> </section> </div>básicamente, estas son pestañas y solo quiero aplicar una clase activa a un div a la vez, mi plan es eliminar todas las clases y luego agregar la clase activa a cualquier pestaña en la que se haga clic usando un evento, pero recibo un error que dice className la propiedad en los otros elementos secundarios no existe, la función funciona para agregar clases pero no para eliminarlas, he visto algunas soluciones jquery pero esperaba encontrar una vainilla
cualquier ayuda es apreciada :)
aquí está la función que estoy tratando de usar
function toggleActive(event){ let element = event.currentTarget let parent = element.parentNode.children; console.log(element) console.log(parent) for (let child in parent){ parent[child.value].className = '' } element.classList.add("toggleSectionActive"); }Intente enlazar la clase y use v-for para las secciones:
new Vue({ el: '#demo', data(){ return { toggled: 0, sections: [ {id: 0, name: 'Step 1', desc: 'Flight Details'}, {id: 1, name: 'Step 2', desc: 'Traveler Info'}, {id: 2, name: 'Step 3', desc: 'Payment'} ] } }, methods: { toggleStep(id){ this.toggled = id } } }) .active { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div id="middleCol"> <section :class="section.id === toggled && 'active'" v-for="section in sections" :key="section.id" @click="toggleStep(section.id)"> <small>{{ section.name }}</small> <h5>{{ section.desc }}</h5> </section> </div> </div>