Model Binding
The Kendo UI for Vue suite provides options for model binding.
Integrating Vue Bindings
In order for the Kendo UI for Vue components to utilize the v-model directive, the wrappers use the custom changemodel event which, when emitted, notifies Vue that the model is changed. It is the value prop that holds the model.
Currently, only widgets which are initialized from
formelements—such as the ColorPicker, ComboBox, and NumerictextBox—support thev-modelintegration.
<div id="vueapp" class="vue-app">
<kendo-colorpicker v-model="color">ColorPicker</kendo-colorpicker>
color: <span v-text="color"></span>
</div>Vue.use(InputsInstaller);
new Vue({
el: "#vueapp",
data () {
return {
color: "5CE500"
}
}
})Events
To facilitate model binding with custom components, Vue allows you to use events. For more information, refer to the official Vue documentation.
Kendo UI for Vue enables you to change a data property dynamically by using events. However, the argument which is passed to the event is not the newly entered value, but the event argument of the used event as defined in the API. For example, if you handle the change event of the ColorPalette, the argument that is available in the handler overload is not the value, but the event arguments. To assign the value, get it through the available event arguments, as demonstrated in the following example.
<div id="vueapp" class="vue-app">
<kendo-colorpicker :value="color"
v-on:change="(ev) => { color = ev.sender.value() }">
</kendo-colorpicker>
color: <span v-text="color"></span>
</div>Vue.use(InputsInstaller);
new Vue({
el: '#vueapp',
data () {
return {
color: "5CE500"
}
}
})The following example demonstrates an alternative implementation.
<div id="vueapp" class="vue-app">
<kendo-colorpicker :value="color"
v-on:change="onChange">
</kendo-colorpicker>
color: <span v-text="color"></span>
</div>Vue.use(InputsInstaller);
new Vue({
el: '#vueapp',
data () {
return {
color: "5CE500"
}
},
methods: {
onChange (ev) {
this.color = ev.sender.value();
}
}
})Objects
Kendo UI for Vue does not support the binding of objects directly to the value prop and, consequently, it is not possible to pass a complex object through the v-model directive. However, you can work around the issue by customizing the code and using the API calls and events of the widget.
The following example demonstrates how to set up the DropDownList to bind the model property while consuming the modelValue computed property as a value.
<div id="vueapp" class="vue-app">
<kendo-dropdownlist :value="modelValue"
:data-source="dataSource"
data-text-field="text"
data-value-field="value"
v-on:change="onChange"></kendo-dropdownlist>
Model: <span v-text="model"></span>
</div>Vue.use(DropdownsInstaller);
new Vue({
el: '#vueapp',
data () {
return {
model: {text: "Text 1", value: "Value 1"},
dataSource: [
{text: "Text 1", value: "Value 1"},
{text: "Text 2", value: "Value 2"},
{text: "Text 3", value: "Value 3"}
]
}
},
computed: {
modelValue: function () {
return this.model.value;
}
},
methods: {
onChange (ev) {
var selectedIndex = ev.sender.select();
var selectedItem = ev.sender.dataItem(selectedIndex).toJSON();
this.model = selectedItem;
}
}
})