Vuejs-如何將選擇項系結到組合框的輸入

我試圖將我選擇的組合框的資料系結到它自己的輸入，但每次我選擇組合框 1 的一個專案時，組合框 2 也會顯示組合框 1 專案。下面是我寫的代碼

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() {
valueInput: null,
}

方法

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

但是這樣，當我選擇上面組合框中的專案時，也會顯示下面的組合框。我希望每個組合框只顯示他們的專案。謝謝大家！

uj5u.com熱心網友回復：

您已將相同的內容系結v-model到兩個組合框，自然會給您這個結果。只需創建兩個單獨的v-models，一個 forselectedWorkStatusValue另一個 for selectedDeptStatusValue。我不知道你用來創建組合框的庫，否則我會給你一個完整的作業演示。盡管如此，下面的示例應該足以讓您繼續前進。

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>

uj5u.com熱心網友回復：

你的 v-model 在組合框 1 和 2 上是一樣的，所以如果你選擇一個值，它在兩者上都是一樣的

標籤：javascript Vue.js

上一篇：為什么Vue.js在Shopify主題中不起作用？

下一篇：可變模板型別作為回傳型別，MSVC怪異