Vuejs单击打开按钮时如何显示选择列表

Question

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!

Answer 1

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>