Kotak semak Vue mengembalikan Null apabila dinyahtandai

Question

Saya sedang menulis aplikasi Vue menggunakan Vuetify. Dalam aplikasi ini, saya menggunakan v-for untuk mengulangi pelbagai objek untuk membina senarai kad. Di dalam setiap kad terdapat kotak pilihan yang memetakan kepada pengambil/penetap yang dikira yang mengemas kini nilai dalam gedung Vuex saya.

Apabila kotak pilihan dipilih, saya menyahdaftar nilai dan memaparkan objek folder. Walau bagaimanapun, apabila dinyahtanda, nilainya ialah tatasusunan kosong. Adakah terdapat sebarang cara untuk menolak objek folder ke dalam penetap apabila kotak semak dinyahtandai? Saya telah cuba menggunakan nilai palsu tetapi nampaknya tidak ada cara untuk mengikatnya pada objek folder.

Berikut adalah logik kad tersebut:

<v-col v-for="folder in childFolders" :key="folder.id">
   <v-card class="mb-2 object-card">
      <v-list-item two-line class="two-line">
         <v-list-item-action>
            <v-checkbox v-model="selectedFolders" :ripple="false" :value="folder" />
         </v-list-item-action>
      </v-list-item>
   </v-card>
</v-col>

Berikut ialah harta pengiraan dua arah yang mengendalikan folder yang dipilih dalam stor tetapan:

selectedFolders: {
   get: function(){
     return this.$store.getters.selectedFolders
   },

   set: function(folder){
     console.log(folder) // returns [{}] when checking and returns [] when unchecking
     return this.$store.commit('selectMainItem', folder)
   }
}

Answer 1

Ah, kegembiraan kotak pilihan... Dulu ketika kami benar-benar menghantar borang POST ke kod hujung belakang, hanya kotak pilihan yang dihantar dalam permintaan POST telah disemak. Jika ia dijana secara dinamik, anda tidak tahu yang mana ada dalam DOM tetapi tidak mempunyai pemeriksaan.

Bagaimana untuk memfaktorkan semula kod supaya childFolders mempunyai atribut isSelected Lepas tu boleh buat

Saya belum cuba, cuma tekaan.