Vue.js désactiver/activer le menu déroulant si la case est cochée ?

Question

J'essaie d'activer/désactiver la sélection déroulante : combinaison lorsque ma case est cochée. Cela fonctionne bien lorsque je Ajouter un nom mais lorsque Sans client est sélectionné, cela ne fonctionne pas dans le travail Modifier le nom

La liste déroulante doit être désactivée car "Sans client" est sélectionnée et ne doit être activée que lorsque je décoche la case. Cependant, lorsque la case est cochée, le menu déroulant est activé, et lorsque je décoche la case, le menu déroulant est désactivé.

données : {
  editSelect : vrai,
},
méthodes : {
  pas de Client()
      {
         this.editSelect = !this.editSelect;
      },
    id="noName"
    v-model="équipe.nameId"
    nom="noName"
    tapez="case à cocher"
    :valeur="null"
    @change="noName()"
 />

 
  ≪/pré>



Veuillez m'aider à comprendre ce qui ne va pas avec mon code. De plus, si vous avez des suggestions sur la façon dont je devrais coder ce problème différemment, faites-le-moi savoir ! 

Answer 1

Vous pouvez définir v-model sur la case à cocher et utiliser cette valeur pour désactiver la liste déroulante.

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>