Vuejs - How can i bind select item to input of combobox

Question

I am trying to bind data from combobox I selected to its own input but every time I select an item of combobox 1 combobox 2 will also show combobox 1 item. Below is the code I wrote

HTML

// Combobox 1
<div style="height: 40px">
            <div class="m-combobox" id="cbbWorkStatus">
              <div class="m-combobox-label">Tình trạng công việc</div>
              <div
                class="select-list"
                :class="
                  isActivate === 'workstatus' ? 'sl-activate' : 'inactive'
                "
                ref="selectList"
              >
                <div
                  class="select-item"
                  :value="item.WorkStatusId"
                  v-for="item in workStatuses"
                  :key="item.WorkStatusId"
                  @click="isSelect"
                >
                  <i class="fas fa-check"></i>
                  <div class="select-item-text">
                    {{ item.WorkStatusName }}
                  </div>
                </div>
              </div>
              <div class="select">
                <input
                  class="m-combobox-input"
                  type="text"
                  placeholder="Chọn/Nhập thông tin"
                  value=""
                  tabindex="15"
                  id="txtWorkStatus"
                  fieldname="WorkStatus"
                  format="workStatus"
                  v-model="selectedValue" <----------------
                />
                <div
                  class="m-combobox-button"
                  @click="activateCbb('workstatus')"
                >
                  <i class="fas fa-angle-down"></i>
                </div>
              </div>
            </div>
</div>
//Combobox 2
<div style="height: 40px">
            <div
              class="m-combobox"
              id="cbbDepartment"
              cbbname="DepartmentName"
              cbbid="DepartmentId"
            >
              <div class="m-combobox-label">Phòng ban</div>
              <div
                class="select-list"
                style="z-index: 100"
                :class="
                  isActivate === 'department' ? 'sl-activate' : 'inactive'
                "
                ref="selectList"
              >
                <div
                  class="select-item"
                  v-for="item in departments"
                  :value="item.DepartmentId"
                  :key="item.DepartmentId"
                  @click="isSelect"
                >
                  <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"
                  value=""
                  tabindex="11"
                  id="txtDepartment"
                  fieldname="DepartmentId"
                  format="department"
                  v-model="selectedValue" <--------------
                />
                <div
                  class="m-combobox-button"
                  @click="activateCbb('department')"
                >
                  <i class="fas fa-angle-down"></i>
                </div>
              </div>
 </div>

Data

data() {
valueInput: null,
}

Methods

created() {
this.selectedValue = this.valueInput;
},

But this way, when I select the item in the combobox above, the combobox below is also displayed. I want each combobox to show only their item. Thank all!

Please help me :(

Viet Quang Fresher
– Viet Quang Fresher

2021-11-02 04:56:35 +00:00
Commented Nov 2, 2021 at 4:56 — Viet Quang Fresher
– Viet Quang Fresher, Commented Nov 2, 2021 at 4:56

Salvino D'sa · Accepted Answer · 2021-11-02 11:32:32Z

You have bound the same v-model to both the comboboxes, naturally giving you this result. Just create two separate v-models, one for selectedWorkStatusValue and the other for selectedDeptStatusValue. I don't know the library you used for creating the combo-box, or else I would have given you a full working demo. Nevertheless, the below sample should be enough to get you going.

new Vue({
  el: "#app",
  data: function() {
    return {
      workStatuses: [{
          WorkStatusId: 1,
          WorkStatusName: 'Programmer'
        },
        {
          WorkStatusId: 2,
          WorkStatusName: 'DevOps'
        },
        {
          WorkStatusId: 3,
          WorkStatusName: 'HR'
        }
      ],
      departments: [{
          DepartmentId: 1,
          DepartmentName: 'IT'
        },
        {
          DepartmentId: 2,
          DepartmentName: 'Management'
        }
      ],
      selectedWorkStatusValue: '',
      selectedDeptStatusValue: ''
    };
  },
  
  methods: {
      isSelect(){ console.log('clicked isSelect') },
      activateCbb(){ console.log('clicked isSelect') }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div style="height: 40px">
    <div class="m-combobox" id="cbbWorkStatus">
      <div class="m-combobox-label">Tình trạng công việc</div>
      <div class="select-list" ref="selectList">
        <div class="select-item" :value="item.WorkStatusId" v-for="item in workStatuses" :key="item.WorkStatusId" @click="isSelect">
          <i class="fas fa-check"></i>
          <div class="select-item-text">
            {{ item.WorkStatusName }}
          </div>
        </div>
      </div>
      <div class="select">
        <input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin" value="" tabindex="15" id="txtWorkStatus" fieldname="WorkStatus" format="workStatus" v-model="selectedWorkStatusValue" />
        <div class="m-combobox-button" @click="activateCbb('workstatus')">
          <i class="fas fa-angle-down"></i>
        </div>
      </div>
    </div>
  </div>

  <br/><br/><br/><br/>
  <div style="height: 40px">
    <div class="m-combobox" id="cbbDepartment" cbbname="DepartmentName" cbbid="DepartmentId">
      <div class="m-combobox-label">Phòng ban</div>
      <div class="select-list" style="z-index: 100" ref="selectList">
        <div class="select-item" v-for="item in departments" :value="item.DepartmentId" :key="item.DepartmentId" @click="isSelect">
          <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" value="" tabindex="11" id="txtDepartment" fieldname="DepartmentId" format="department" v-model="selectedDeptStatusValue" />
        <div class="m-combobox-button" @click="activateCbb('department')">
          <i class="fas fa-angle-down"></i>
        </div>
      </div>
    </div>
  </div>
</div>

QuentinH · Accepted Answer · 2023-01-13 13:03:15Z

You v-model is the same on combobox 1 and 2 so if you select a value it's the same on both

So you need to create another v-model for your combobox 2 :


// Combobox 1
<div style="height: 40px">
            <div class="m-combobox" id="cbbWorkStatus">
              <div class="m-combobox-label">Tình trạng công việc</div>
              <div
                class="select-list"
                :class="
                  isActivate === 'workstatus' ? 'sl-activate' : 'inactive'
                "
                ref="selectList"
              >
                <div
                  class="select-item"
                  :value="item.WorkStatusId"
                  v-for="item in workStatuses"
                  :key="item.WorkStatusId"
                  @click="isSelect"
                >
                  <i class="fas fa-check"></i>
                  <div class="select-item-text">
                    {{ item.WorkStatusName }}
                  </div>
                </div>
              </div>
              <div class="select">
                <input
                  class="m-combobox-input"
                  type="text"
                  placeholder="Chọn/Nhập thông tin"
                  value=""
                  tabindex="15"
                  id="txtWorkStatus"
                  fieldname="WorkStatus"
                  format="workStatus"
                  v-model="selectedValue" <----------------
                />
                <div
                  class="m-combobox-button"
                  @click="activateCbb('workstatus')"
                >
                  <i class="fas fa-angle-down"></i>
                </div>
              </div>
            </div>
</div>
//Combobox 2
<div style="height: 40px">
            <div
              class="m-combobox"
              id="cbbDepartment"
              cbbname="DepartmentName"
              cbbid="DepartmentId"
            >
              <div class="m-combobox-label">Phòng ban</div>
              <div
                class="select-list"
                style="z-index: 100"
                :class="
                  isActivate === 'department' ? 'sl-activate' : 'inactive'
                "
                ref="selectList"
              >
                <div
                  class="select-item"
                  v-for="item in departments"
                  :value="item.DepartmentId"
                  :key="item.DepartmentId"
                  @click="isSelect"
                >
                  <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"
                  value=""
                  tabindex="11"
                  id="txtDepartment"
                  fieldname="DepartmentId"
                  format="department"
                  v-model="selectedValue2" <-------------- New Selected Value
                />
                <div
                  class="m-combobox-button"
                  @click="activateCbb('department')"
                >
                  <i class="fas fa-angle-down"></i>
                </div>
              </div>
 </div>
<script>
export default {
  data() {
     return {
      workStatuses: [],
      departments: [],
      selectedValue : '',
      selectedValue2: ''
    };
  },
  
  methods: {
      isSelect(){ console.log('clicked isSelect') },
      activateCbb(){ console.log('clicked isSelect') }
  }
}
</script>

Can you edit your answer to show a part of working code that may answer to the question ?

Collectives™ on Stack Overflow

Vuejs - How can i bind select item to input of combobox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related