Das Vue-Kontrollkästchen gibt Null zurück, wenn es nicht aktiviert ist

Question

Ich schreibe eine Vue-Anwendung mit Vuetify. In dieser Anwendung verwende ich v-for, um ein Array von Objekten zu durchlaufen und eine Liste von Karten zu erstellen. In jeder Karte befindet sich ein Kontrollkästchen, das einem berechneten Getter/Setter zugeordnet ist, der den Wert in meinem Vuex-Shop aktualisiert.

Wenn das Kontrollkästchen aktiviert ist, hebe ich die Registrierung des Werts auf und zeige das Ordnerobjekt an. Wenn die Option deaktiviert ist, handelt es sich bei dem Wert jedoch um ein leeres Array. Gibt es eine Möglichkeit, ein Ordnerobjekt in einen Setter zu verschieben, wenn das Kontrollkästchen deaktiviert ist? Ich habe versucht, einen falschen Wert zu verwenden, aber es scheint keine Möglichkeit zu geben, ihn an das Ordnerobjekt zu binden.

Das Folgende ist die Logik der Karte:

<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>

Hier ist die bidirektional berechnete Eigenschaft, die den ausgewählten Ordner im Einstellungsspeicher verwaltet:

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

啊，复选框的乐趣...回到我们真正将 POST 表单发送到后端代码的那一天，只有在 POST 请求中发送的复选框才被选中。如果它们是动态生成的，您不知道哪些在 DOM 中但没有检查。

如何重构代码，使 childFolders 具有 isSelected 属性 那么你可以做

没试过，只是猜测。