Vue.js Dropdown-Menü deaktivieren/aktivieren, wenn das Kontrollkästchen aktiviert ist?
P粉714844743
P粉714844743 2023-08-29 23:14:07
0
1
642
<p>Ich versuche, die Dropdown-Kombinationsauswahl zu aktivieren/deaktivieren, wenn mein Kontrollkästchen aktiviert ist. Es funktioniert gut, wenn ich <strong>Name hinzufügen</strong> auswähle, aber wenn <em>Clientless</em> ausgewählt ist, funktioniert es nicht. </p> <p>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. </p> <p> <pre class="brush:js;toolbar:false;">data: { editSelect: true, }, Methoden: { noClient() { this.editSelect = !this.editSelect; },</pre> <pre class="brush:html;toolbar:false;"> 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" /> </pre> </p> <p>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! </p>
P粉714844743
P粉714844743

Antworte allen(1)
P粉162773626

您可以在复选框上设置 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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage