Vue 复选框在未选中时返回 Null

Question

我正在使用 Vuetify 编写 Vue 应用程序。在此应用程序中，我使用 v-for 遍历对象数组以构建卡片列表。在每张卡片中都有一个复选框，它映射到一个计算的 getter/setter，它更新我的 Vuex 存储中的值。

选中复选框时，我注销值并显示文件夹对象。但是，取消选中时，该值为空数组。当复选框未选中时，我有什么办法可以将文件夹对象推入 setter 吗？我试过使用假值，但似乎没有办法将其绑定到文件夹对象。

以下是卡片的逻辑：

<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 然后你可以做

没试过，只是猜测。

Vue 复选框在未选中时返回 Null

Vue Checkbox Returning Null When Unckecked

vue.js

vuex

vuetify.js