QCheckboxGroup
Is being used to wrap multiple QCheckbox
Examples
<template>
<q-checkbox-group v-model="checkedCities">
<q-checkbox v-for="city in cities" :key="city" :label="city" />
</q-checkbox-group>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { QCheckboxGroup, QCheckbox } from '@qvant/qui-max';
defineComponent({
components: { QCheckboxGroup, QCheckbox },
setup() {
const checkedCities = ref(['Shanghai', 'Beijing']);
const cities = ref(['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']);
return { checkedCities, cities };
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<q-checkbox-group v-model="checkedCities">
<q-checkbox v-for="city in cities" :key="city" :label="city" />
</q-checkbox-group>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { QCheckboxGroup, QCheckbox } from '@qvant/qui-max';
defineComponent({
components: { QCheckboxGroup, QCheckbox },
setup() {
const checkedCities = ref<string[]>(['Shanghai', 'Beijing']);
const cities = ref<string[]>([
'Shanghai',
'Beijing',
'Guangzhou',
'Shenzhen'
]);
return { checkedCities, cities };
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Result:
Props
tag
- Type:
string - Default:
div
Defines the root tag.
min
- Type:
number - default
0
Sets the minimum number of checkboxes, that can be selected
<q-checkbox-group v-model="checkedCities" :min="2">
<q-checkbox
v-for="city in cities"
:key="city"
:label="city"
/>
</q-checkbox-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
max
- Type:
number - default
Infinity
Sets the maximum number of checkboxes, that can be selected
<q-checkbox-group v-model="checkedCities" :max="3">
<q-checkbox
v-for="city in cities"
:key="city"
:label="city"
/>
</q-checkbox-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
disabled
- Type:
boolean - Default:
false
Allows to disable all inner QCheckboxes
<q-checkbox-group v-model="checkedCities" disabled>
<q-checkbox
v-for="city in cities"
:key="city"
:label="city"
/>
</q-checkbox-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
direction
- Type:
'vertical' | 'horizontal' - Default:
vertical
Defines the direction of list: vertical or horizontal
<q-checkbox-group v-model="checkedCities" direction="vertical">
<q-checkbox
v-for="city in cities"
:key="city"
:label="city"
/>
</q-checkbox-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
Events
update:modelValue
Triggers when the model is being updated
change
Alias for update:modelValue
In template:
<q-checkbox-group
v-model="checkedCities"
@change="changeHandler"
>
<q-checkbox
v-for="city in cities"
:key="city"
:label="city"
/>
</q-checkbox-group>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
In setup:
setup() {
const checkedCities = ref(['Shanghai', 'Beijing']);
const cities = ref([
'Shanghai',
'Beijing',
'Guangzhou',
'Shenzhen'
]);
const changeHandler = (value) => {
// do something with new value
};
return { checkedCities, cities, changeHandler };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setup() {
const checkedCities = ref<string[]>(['Shanghai', 'Beijing']);
const cities = ref<string[]>([
'Shanghai',
'Beijing',
'Guangzhou',
'Shenzhen'
]);
const changeHandler = (value: string[]): void => {
// do something with new value
};
return { checkedCities, cities, changeHandler };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15