Quiero mostrar datos para cada registro por idioma (por lo que habrá más idiomas, habrá más pestañas para cada registro),
Así que hice un método simple, si el valor es igual a la clave y el índice, debería mostrar la pestaña requerida.
Tengo el siguiente marcado en la plantilla:
<div class="nav-item" v-for="(property, keyProp) in item.props" :key="keyProp" > <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6"> <li class="nav-item" v-for="(language, key) in property" :key="key"> <a class="nav-link" data-bs-toggle="tab" @click="toggle(key + keyProp)" > {{ key }} </a> </li> </ul> <div v-for="(language, key) in property" :key="key" v-show="isOpenIndex === key + keyProp" > {{ key + keyProp }} <input type="text" v-model="language.text" class="form-control form-control-solid" /> </div> </div>Y método:
methods: { toggle: function (index) { this.isOpenIndex = index; }, Pero por alguna razón no funciona de esta manera. Puedo hacer que funcione como si agregara a data algo como isOpenIndex: this.IsOpenIndex pero mostrará solo una pestaña a la vez, cerrando otras si presiono otra. ¿Cómo prevenir eso?
Solo quiero cerrar la pestaña abierta anteriormente si es el mismo registro.
Así que se me ocurrió esta función de método ligeramente modificada y todo funciona.
toggle: function (id, lang, type) { for(var key in this.item.props[id][lang]) { var prop = this.item.props[id][lang][key]; if(prop.active === true) { return [ prop.active = false, this.item.props[id][lang][type].active = true ] } } return this.item.props[id][lang][type].active = true }, He agregado a cada valor active: false , por lo que, de forma predeterminada, todo está oculto. Aunque cuando se ejecuta el método, reemplaza false por true , si true ya está configurado, pasa if la declaración dentro del ciclo y coloca el parámetro anterior en false y reemplaza uno nuevo con true