vuejs wrappers- support for dataSource refresh?

[milind]

I am trying to bind a combobox to a dynamic array defined on Vue instance. The values on the array are not known until the control is databound. I can't seem to figure why change to the array won't refresh the combo. Here's the code snippet. Does current version pf kendo-vue support this behavior?

 

//javascript

var that = this;

that.$set(that, 'countryArray', [{text: 'canada', value:'2' }]);

//html

<kendo-combobox v-model="countrySel"
:placeholder="'Select country...'"
:data-source="countryArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"
>
</kendo-combobox>

[Dimitar]

Hello Milind,

The described behavior is already implemented and is part of the new reactivity changes that are scheduled to be released with the next Service Pack (2018 R1 SP1) in late February.

Currently, as a workaround for the issue, a watcher can be defined which will use the setDataSource() method to update the widget data:

<script>
new Vue({
el: "#vueapp",
data: function() {
return {
dataSourceArray: [ 'Football', 'Basketball']
}
},
mounted: function() {
 this.dataSourceArray = ['New value 1', 'New value 2']
},
watch: {
dataSourceArray (val) {
 this.$refs.combobox.kendoWidget().setDataSource(val)
}
}
})
</script>

The above is demonstrated in action on the following Plunker.

Regards,
Dimitar
Progress Telerik

[milind]

@Dimitar - Does 2018.1.212 address this issue? 

[Dimitar]

Hello Milind,

I can confirm that the reactivity changes for the Kendo Vue wrappers are released with the specified version (2018.1.212). You can test it out to verify that everything is working as expected.

Regards,
Dimitar
Progress Telerik