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
id="cbbDepartment"
cbbname="DepartmentName"
cbbid="DepartmentId"
>
<div >Phòng ban</div>
<div
style="z-index: 100"
:
ref="selectList"
>
<div
v-for="item in departments"
:value="item.DepartmentId"
:key="item.DepartmentId"
@click="isSelect"
>
<i ></i>
<div >
{{ item.DepartmentName }}
</div>
</div>
</div>
<div >
<input
type="text"
placeholder="Chọn/Nhập thông tin"
value=""
tabindex="11"
id="txtDepartment"
fieldname="DepartmentId"
format="department"
v-model="selectedValue" <--------------
/>
<div
@click="activateCbb('department')"
>
<i ></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!
CodePudding user response：
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>CodePudding user response：
You v-model is the same on combobox 1 and 2 so if you select a value it's the same on both