javascript - 如何正确选择所有复选框？

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 更改时重新计算。

Demo