CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5236

How do I correctly select all checkboxes?

In my Vue.js application I have an array called filters. That array has the following structure:

[{
    "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
  }
]

I parse that array and create widgets in the interface. As you can see from the example below, I set one checkbox inside each card title. If the user selects that checkbox, I want to select all checkboxes in the specific group. How do I make it correctly?

<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>

Upvotes: 0

Views: 79

Answers (1)

User 28
User 28

Reputation: 5158

I would prefer to keep things short and simple as much as possible

<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 : []

This will set selected_values to filter_values for select all and [] for deselect all based all checkbox value ($event).

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

This will make the checkbox value recompute when selected_values changed.

Demo

Upvotes: 1

Related Questions