I am encountering a bug in my vuejs application where deleting one element causes the previous select2 value to be applied to the wrong row. This issue occurs when looping through an array and outputting multiple select2 elements with delete buttons next to them.
For a demo, you can visit: https://jsfiddle.net/3oqsmw0z/1/
The deletion of items is done by index using the following code:
deleteItem: function(index) {
console.log('deleteItem');
this.mySelects.splice(index, 1);
}
To replicate the issue:
Select the first option in the first select, the second option in the second select, then the third option in the third select. Now, delete the second option. Instead of showing options one and three as expected, it displays the selected option from the deleted second element. The label indicates it's the third element, but the selected option belongs to the second element.