Model Binding
28 Jun 20242 minutes to read
Integrating Vue model binding in Syncfusion Vue UI components
Syncfusion Vue UI components support model binding through the v-model
directive. The model binding support in Syncfusion Vue components uses custom ‘modelchanged’ event, which is used to notify Vue that a model is changed.
- Syncfusion Vue UI components that are initialized from form elements support model binding.
Refer to the following code snippet.
<template>
<div id="app">
<ejs-checkbox v-model="checked" label="EJ2 Vue Checkbox" :checked="checked" />
<p>
Checkbox State: <span id="checked-state" v-text="checked" ></span>
</p>
</div>
</template>
<script setup>
import { CheckBoxComponent as EjsCheckbox } from '@syncfusion/ej2-vue-buttons';
import { ref } from 'vue';
const checked = ref(true);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<template>
<div id="app">
<ejs-checkbox v-model="checked" label="EJ2 Vue Checkbox" :checked="checked" />
<p>
Checkbox State: <span id="checked-state" v-text="checked"></span>
</p>
</div>
</template>
<script>
import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-checkbox": CheckBoxComponent
},
data() {
return {
checked: true
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>