如果选中复选框，Vue.js 禁用/启用下拉菜单？

Question

我正在尝试启用/禁用下拉菜单：选中我的框时进行组合选择。 当我添加名称时它可以正常工作，但当选中无客户端时，它不能在编辑名称中工作。

应禁用下拉列表，因为选择了“无客户端”，并且仅当我取消选中该框时才应启用该下拉列表。但是，当选中该框时，下拉菜单将启用，而当我取消选中该框时，下拉菜单将被禁用。

data: {
  editSelect: true,
},
methods: {
  noClient()
      {
         this.editSelect = !this.editSelect;
      },

 <b-form-checkbox
    id="noName"
    v-model="team.nameId"
    name="noName"
    type="checkbox"
    :value="null"
    @change="noName()"
 />

 
 <combo-select     
    id="nameBox"
    v-model="team.nameId"
    api-location="fetchTeamsByName"
    api-details-location="fetchTeamDetails"
    search-parameter="name"
    :additional-search-fields="additionalSearchField"
    :transformer="nameTransformer"   
    :value="null" 
    :config="{
              ...comboConfig,
              searchLabel: 'Search names',
              isEditable: editSelect,
             }"
    class="input input__typeahead"
    @on-select-item="onTeamComboSelect" 
/>       

请帮助我理解我的代码哪里出了问题。另外，如果您对我应该如何针对此问题进行不同的编码有任何建议，请告诉我！

Answer 1

您可以在复选框上设置 v-model 并使用该值禁用下拉菜单。

const app = Vue.createApp({
  data() {
    return {
      checkBox: false
    }
  }
})

app.mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <input type="checkbox" v-model="checkBox" />
  <p>checkBox: {{checkBox}}</p>
  <select :disabled="!checkBox" name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

</div>