Escribí así, pero cuando presiono el botón, aparecen todos los cuadros combinados, pero quiero que cuando presiono el botón en cualquier cuadro combinado solo aparezca ese cuadro combinado.
HTML
<div class="m-combobox"> <div class="select-list" :class="{'sl-activate':isActivate}"> <div class="select-item" v-for="item in departments" :key="item.DepartmentId"> <i class="fas fa-check"></i> <div class="select-item-text">{{item.DepartmentName}}</div> </div> </div> <div class="select"> <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin"> <div class="m-combobox-button" @click="activateCbb"> <i class="fas fa-angle-down"></i> </div> </div> </div> <div class="m-combobox"> <div class="select-list" :class="{'sl-activate':isActivate}"> <div class="select-item" v-for="item in positions" :key="item.PositionId"> <i class="fas fa-check"></i> <div class="select-item-text">{{item.PositionName}}</div> </div> </div> <div class="select"> <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin"> <div class="m-combobox-button" @click="activateCbb"> <i class="fas fa-angle-down"></i> </div> </div> </div>
data
data: function () { return { positions: [], departments: [], isActivate: false, }; }
Method
methods:{ activateCbb() { this.isActivate = !this.isActivate; }, }¡Gracias a todos!
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { positions: [{PositionId:1, PositionName:'ccc'}, {PositionId:2, PositionName:'ddd'}], departments: [{DepartmentId:1,DepartmentName: 'aaa'}, {DepartmentId:2,DepartmentName: 'bbb'}], isActivate: null, }; }, methods:{ activateCbb(type) { if(this.isActivate === type) { this.isActivate = null } else { this.isActivate = type } }, } }) Vue.config.productionTip = false Vue.config.devtools = false .sl-activate { display: block; } .inactive { display: none; } <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="m-combobox"> <div class="select-list" :class="isActivate === 'd' ? 'sl-activate' : 'inactive'"> <div class="select-item" v-for="item in departments" :key="item.DepartmentId"> <i class="fas fa-check"></i> <div class="select-item-text">{{item.DepartmentName}}</div> </div> </div> <div class="select"> <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin"> <div class="m-combobox-button" @click="activateCbb('d')"> <i class="fas fa-angle-down"></i> </div> </div> </div> <div class="m-combobox"> <div class="select-list" :class="isActivate === 'p' ? 'sl-activate' : 'inactive'"> <div class="select-item" v-for="item in positions" :key="item.PositionId"> <i class="fas fa-check"></i> <div class="select-item-text">{{item.PositionName}}</div> </div> </div> <div class="select"> <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin"> <div class="m-combobox-button" @click="activateCbb('p')"> <i class="fas fa-angle-down"></i> </div> </div> </div> </div>