i wrote like this but when i press the button all comboboxes show up but i want when i press the button in any combobox only that combobox will show up
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;
},
}
Tks all!
Try like following snippet:
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>