Vue 複選框在未選取時傳回 Null

Question

我正在使用 Vuetify 編寫 Vue 應用程式。在此應用程式中，我使用 v-for 迭代物件數組來建立卡片列表。每張卡片內都有一個複選框，映射到計算得出的 getter/setter，用於更新我的 Vuex 儲存中的值。

選擇該複選框時，我會登出該值並顯示資料夾物件。但是，取消選取時，值為空數組。當未選取複選框時，有什麼方法可以將資料夾物件推入設定器中？我嘗試過使用 false-value，但似乎沒有辦法將其綁定到資料夾物件。

以下是卡片的邏輯：

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

以下是處理設定儲存中選定資料夾的雙向運算屬性：

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 屬性 那你可以做

沒試過，只是猜測。