Vue 複選框在未選取時傳回 Null
P粉637866931
P粉637866931 2024-03-26 22:07:01
0
1
422

我正在使用 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)
   }
}

P粉637866931
P粉637866931

全部回覆(1)
P粉787806024

啊,複選框的樂趣...回到我們真正將 POST 表單發送到後端程式碼的那一天,只有在 POST 請求中發送的複選框才被選中。如果它們是動態生成的,您不知道哪些在 DOM 中但沒有檢查。

如何重構程式碼,讓 childFolders 具有 isSelected 屬性 那你可以做

沒試過,只是猜測。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板