Vuejs How can I show select-list when I click on open button-CodePudding

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!

CodePudding user response：

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>