Vue.js Dropdown-Menü deaktivieren/aktivieren, wenn das Kontrollkästchen aktiviert ist?

Question

Ich versuche, die Dropdown-Kombinationsauswahl zu aktivieren/deaktivieren, wenn mein Kontrollkästchen aktiviert ist. Es funktioniert gut, wenn ich Name hinzufügen auswähle, aber wenn Clientless ausgewählt ist, funktioniert es nicht.

Das Dropdown-Menü sollte deaktiviert sein, da „Clientless“ ausgewählt ist, und sollte nur aktiviert werden, wenn ich das Kontrollkästchen deaktiviere. Wenn das Kästchen jedoch aktiviert ist, ist das Dropdown-Menü aktiviert, und wenn ich das Kästchen deaktiviere, ist das Dropdown-Menü deaktiviert.

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

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

 
 <Kombinationsauswahl
    id="nameBox"
    v-model="team.nameId"
    api-location="fetchTeamsByName"
    api-details-location="fetchTeamDetails"
    Suchparameter="Name"
    :additional-search-fields="additionalSearchField"
    :transformer="nameTransformer"
    :value="null"
    :config="{
              ...comboConfig,
              searchLabel: 'Namen suchen',
              isEditable: editSelect,
             }"
    class="Eingabe input__typeahead"
    @on-select-item="onTeamComboSelect"
/> 

Bitte helfen Sie mir zu verstehen, was mit meinem Code nicht stimmt. Wenn Sie außerdem Vorschläge haben, wie ich dieses Problem anders codieren könnte, lassen Sie es mich bitte wissen!

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>