Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Radio Buttons
We can add radio buttons with the v-radio component.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<p>{{ radios }}</p>
<v-radio-group v-model="radios" :mandatory="false">
<v-radio label="Radio 1" value="radio-1"></v-radio>
<v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
radios: '',
}),
};
</script>
Setting the mandatory prop to false makes it optional.
Radios Buttons Direction
Radio buttons can be in a row or in a column.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<p>{{ radios }}</p>
<v-radio-group v-model="radios" column>
<v-radio label="Radio 1" value="radio-1"></v-radio>
<v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
radios: "",
}),
};
</script>
to display the radio buttons in a column.
We can make them display in a row with a row prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<p>{{ radios }}</p>
<v-radio-group v-model="radios" row>
<v-radio label="Radio 1" value="radio-1"></v-radio>
<v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
radios: "",
}),
};
</script>
Radios Button Colors
The colors of radio buttons can be changed with the color prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<p>{{ radios }}</p>
<v-radio-group v-model="radios">
<v-radio label="Radio 1" value="radio-1" color="red"></v-radio>
<v-radio label="Radio 2" value="radio-2" color="red"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
radios: "",
}),
};
</script>
We change the radio button color with the color prop on each button.
Switches
We can add switches with the v-switch component.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-container fluid>
<v-switch v-model="sw" :label="`Switch: ${sw.toString()}`"></v-switch>
</v-container>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
sw: false,
}),
};
</script>
We have the v-switch with v-model binding to a boolean state.
Switches Array
We can have multiple switches that bind to the same variable.
For example, we write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-container fluid>
<p>{{ people }}</p>
<v-switch v-model="people" label="james" value="james"></v-switch>
<v-switch v-model="people" label="mary" value="mary"></v-switch>
</v-container>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
people: [],
}),
};
</script>
We have the value prop which will be added to the people array if we check it.
Conclusion
Vuetify provides us with radio buttons and switches.
