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

没试过，只是猜测。