vue.js在直接更改CSS /樣式和從數組中刪除項目時的奇怪行為

Question

似乎Vue保留了已刪除項目的樣式，並將其應用於與已刪除項目具有相同索引的新項目。

請檢查以下示例。 項目將正確刪除，但我們直接更改的樣式將保留給下一個項目。 這是正常現象嗎？

我知道我們可以在這里使用v-bind:style或v-bind:class來解決問題，但是有時您需要使用直接更改樣式的第三方庫，在這種情況下，我們不能使用v-bind 。 為什么Vue只是不刪除我們從數組中刪除其項目的相應DOM對象？

 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> 

Answer 1

問題是您沒有在v-for定義鍵

嘗試<div v-for="i in list" :key="i" >使用<div v-for="i in list" :key="i" >

盡管您應該在對象<div v-for="i in list" :key="i.id" >使用專用ID，以獲得最佳效果。

您看到此問題的原因是vue使用鍵來標識對象，因此當發生更改且沒有鍵時，vue會將其視為同一對象。