Vue CheckBox - Getting Started
This tutorial shows how to add the CheckBox to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-check-box.
Create a CheckBox
Add DevExtreme to your Vue application and use the following code to create a CheckBox component:
- <template>
- <DxCheckBox />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxCheckBox } from 'devextreme-vue/check-box';
- export default {
- components: {
- DxCheckBox
- }
- }
- </script>
Specify the Initial Value
The CheckBox can be in one of the following states depending on its value:
You can turn on the enableThreeStateBehavior option to allow users to cycle through all three states.
The following code specifies the initial value as null
:
- <template>
- <DxCheckBox
- :value="null"
- :enable-three-state-behavior="true"
- />
- </template>
- <script>
- // ...
- </script>
Handle the Value Change
Implement the onValueChanged event handler to perform an action when users click the CheckBox.
The code below notifies a user every time the CheckBox is checked.
- <template>
- <DxCheckBox ...
- @value-changed="onValueChanged"
- />
- </template>
- <script>
- // ...
- import notify from "devextreme/ui/notify";
- export default {
- // ...
- methods: {
- onValueChanged(e) {
- if (e.value) {
- notify("The CheckBox is checked", "success", 500);
- }
- }
- }
- }
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.