CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5246

Check all values in radio buttons (vuetify)?

In my Vue.js application I use the radio buttons of the Vuetify framework. I know that by default, the user can select only one value in the list of available values in this widget. At the same time I have a checkbox when selecting which I want to mark all values in radio buttons. Is it even possible?

Right now I use the next code. If I select the checkbox, I see in the DevTools that the v-model parameter of radio buttons has an array (selected_values) with all available values. At the same time, I can't see the placemark on the radio buttons.

<template
<v-checkbox
    v-on="on"
    :value="selected_values.length === available_values.length"
    @change="selected_values = $event ? available_values : []"
    hide-details>
</v-checkbox>
<v-radio-group
    v-model="selected_values"
    hide-details>
    <v-radio
        v-for="(item, index) in available_values"
        :label="values_description[index]"
        :value="item"
        :key="item">
    </v-radio>
</v-radio-group>
</template>

export default {
    data () {
        return {
            selected_values: [],
            available_values: [1, 0],
            values_description: ["Yes", "No"]
        }
    },
}

Upvotes: 0

Views: 1682

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

No, you cannot. This is just bad design. You shouldn't break user expectations and design standards.

Instead use v-checkbox elements for everything:

Demo: https://codepen.io/AlekseiHoffman/pen/poJVrxm?editors=1010

Code

<v-checkbox
  v-model="selectAll"
  @change="selectAllCheckboxes"
  label="Select all"
  hide-details
></v-checkbox>

 <v-checkbox
  v-for="checkbox in checkboxes"
  v-model="selectedCheckboxes"
  :value="checkbox"
  :label="checkbox"
  hide-details
></v-checkbox>

data: () => ({
  selectAll: false,
  selectedCheckboxes: [],
  checkboxes: ['checkbox 1', 'checkbox 2']
}),
methods: {
  selectAllCheckboxes () {
    if (this.selectAll) {
      this.selectedCheckboxes = [...this.checkboxes]
    }
    else {
      this.selectedCheckboxes = []
    }
  }
}

Upvotes: 1

Related Questions