Tengo varios menús desplegables en un componente.
<div v-for="(item, index) in items" :key="index"> <div class="dropdown"> <button @click="showInfo(index)"></button> <div v-show="isOpen">{{ item.content }}</div> </div> </div>vista:
showInfo(index) { this.isOpen = !this.isOpen; },Siento que necesito usar index , pero todavía no funciona para mí. ¿Qué extraño?
Puede guardar el índice en isOpen y luego verificarlo en la plantilla:
const app = Vue.createApp({ data() { return { items: [{content: 1}, {content: 2}, {content: 3}], isOpen: null }; }, methods: { showInfo(index) { this.isOpen = this.isOpen === index ? null : index; }, } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="(item, index) in items" :key="index"> <div class="dropdown"> <button @click="showInfo(index)">show</button> <div v-show="isOpen === index">{{ item.content }}</div> </div> </div> </div>Puede lograr esto de una manera muy simple simplemente jugando con la variable itemIndex .
Demostración en vivo :
new Vue({ el: '#app', data: { items: [{ name: 'Dropdown Menu 1', options: ['Option 1', 'Option 2', 'Option 3'] }, { name: 'Dropdown Menu 2', options: ['Option 4', 'Option 5', 'Option 6'] }], itemIndex: null } }) ul { list-style-type: none; padding: 0; margin: 0; background-color: #F2C777; } li a { display: block; padding: 10px; text-align: center; color: #7C785B; } li a:hover { background-color: #EC8C65; } li { display: inline-block; } .droplinks { position: absolute; background-color: #F2D299; min-width: 140px; display: block; } .droplinks a { padding: 10px; display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <nav> <ul> <li class="dropbutton" v-for="(item, index) in items" :key="index"> <a @click="itemIndex = itemIndex ? null : index">{{ item.name }}</a> <div class="droplinks" v-if="itemIndex === index"> <a href="" v-for="(option, i) in item.options" :key="i">{{ option }}</a> </div> </li> </ul> </nav> </div>