如何正確選擇所有復選框？

Question

在我的Vue.js應用程序中，我有一個名為filters的數組。 該數組具有以下結構：

[{
    "side": "R",
    "filter_id": 1,
    "filter_name": "gender",
    "filter_description": "Gender",
    "filter_values": [
      "M",
      "F"
    ],
    "filter_description_values": [
      "Male",
      "Female"
    ],
    "widget": "checkbox",
    "selected_values": null
  },
  {
    "side": "R",
    "filter_id": 2,
    "filter_name": "age",
    "filter_description": "Age",
    "filter_values": [
      "18-29",
      "30-44",
      "45-60"
    ],
    "filter_description_values": [
      "from 18 to 29",
      "from 30 to 44",
      "from 45 to 60"
    ],
    "widget": "checkbox",
    "selected_values": null
  }
]

我解析該數組並在界面中創建小部件。 從下面的示例中可以看出，我在每個卡片標題中設置了一個復選框。 如果用戶選擇該復選框，我想選擇特定組中的所有復選框。 我該如何正確制作？

<template>
   <div
     v-for="item in filters"
     :key="item.filter_id">
     <v-card
        tile
        elevation="0"
        v-if="item.side==='R'">
        <v-card-title>
           <span>{{item.filter_description}}</span>
           <v-spacer></v-spacer>
           <v-checkbox
              :v-model="?">
           </v-checkbox>
        </v-card-title>
        <v-card-text>
           <v-checkbox
              v-if="item.widget==='checkbox'"
              v-for="(value, index) in item.filter_values"
              :label="item.filter_description_values[index]"
              :value="value"
              :key="value"
              v-model="item.selected_value"
              hide-details>
           </v-checkbox>
        </v-card-text>
     </v-card>
   </div>
 </template>

<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    computed: mapGetters('store', [
      'filters'
    ])
  }
</script>

Answer 1

我更願意讓事情盡可能簡短

<v-checkbox
  :value="item.selected_values.length === item.filter_values.length"
  @change="item.selected_values = $event ? item.filter_values : []">
</v-checkbox>

item.selected_values = $event ？ item.filter_values : []

這會將selected_values設置為filter_values以用於全選和[]用於取消全選基於所有復選框值（ $event ）。

item.selected_values.length === item.filter_values.length

這將在selected_values更改時重新計算復選框值。

演示