I have been working on migrating some of our older angular.js interfaces to Vue and Kendo UI. I hit an interesting problem recently migrating our invoicing module.
We have a list of items on an invoice. Essentially the below.
As part of the update I was replacing the item / service column to use a Kendo DropDown List. Since I wanted to bind to a remote data source from our servers I was using the wrapper component.
Everything went perfectly until I re-implemented the delete button.
Normally it would be easy enough to do something like the following:
deleteLineItem(idx){
console.log("delete");
console.log(idx);
this.invoice.invoice_items.splice(idx,1);
},
Using a splice would keep Vue’s data binding happier than using something like underscore’s reject function.
Each time I ran this code any of the Kendo DropDown List’s below the deleted one would lose their selection and revert back to the default selection prompt. All other elements would be fine.
Not being able to find anything obvious, I ended up putting a watcher on the child component I was using to wrap the selection drop down logic.
watch:{
value: function(){
console.log("***** CHANGE *****");
}
},
It turned out that the child component was receiving a change notification (based on the v-model binding) for all elements in the array based on the index change. Since the the actual value wasn’t changing it wasn’t triggering another look up by the select box on the remote data source.