Vue.js lumpuhkan/dayakan menu lungsur jika kotak semak ditandakan?

Question

Saya cuba mendayakan/lumpuhkan dropdown:pemilihan gabungan apabila kotak saya ditandakan. Ia berfungsi dengan baik apabila saya Tambah Nama tetapi apabila Tanpa Pelanggan ia tidak berfungsi dalam Edit Nama

Titik lungsur harus dilumpuhkan kerana "Tanpa Pelanggan" dipilih dan hanya perlu didayakan apabila saya menyahtanda kotak. Walau bagaimanapun, apabila kotak ditandakan, menu lungsur didayakan dan apabila saya menyahtanda kotak itu, menu lungsur dilumpuhkan.

data: {
  editPilih: benar,
},
kaedah: {
  noClient()
      {
         this.editSelect = !this.editSelect;
      },

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

 
  



Tolong bantu saya memahami apa yang salah dengan kod saya. Selain itu, jika anda mempunyai sebarang cadangan tentang cara saya harus mengodkan masalah ini secara berbeza, sila beritahu saya! 

Answer 1

Anda boleh menetapkan v-model pada kotak pilihan dan gunakan nilai itu untuk melumpuhkan menu lungsur.

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>