Seems that Vue keeps style of a removed item and apply it to the new item with the same index as removed one.
Please check the example below. Item will remove correctly but its style that we changed directly remains for next item. Is this a normal behavior?
I know that we can use v-bind:style or v-bind:class here, that will fix the problem, but sometimes you need to work with a third party library that changes styles directly, in that case we can not use v-bind. Why Vue just doesn't delete the corresponding DOM object that we removed its item from array?
var init = function() {
var app = new Vue({
el: '.app',
data: {
list: [{val: 1}, {val: 2}, {val: 3}, {val: 4}, {val: 5}],
},
methods: {
delete_item: function(item) {
var index = this.list.indexOf(item);
this.list.splice(index, 1);
},
},
});
};
var make_it_red = function() {
document.querySelectorAll('div span')[2].style.color = 'red';
};
window.onload = init;<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="app">
<p>First click on make it red button and then try to delete red item.</p>
<div v-for="i in list">
<span>item {{i.val}}</span>
<button v-on:click="delete_item(i)">delete</button>
</div>
<button onclick="make_it_red()">make it red</button>
</div>
