Vue.js不是所有的過渡組兒童動畫

<article class="hotel-row" v-for="hotel in paginatedHotels" :key="hotel.hotelid"> 
    <search-hotel :hotel="hotel"></search-hotel> 
</article>

Vue公司將拋出一個錯誤，如果我不鍵孩子的過渡組：

[Vue公司警告]：兒童必須被鍵入：

沒問題我添加我獨特的hotelid以確保Vue可以區分元素。

我有一個25家酒店的列表，問題是當我鍵入我的子元素時，我的第25個結果中的元素以及更新我的酒店列表後的結果中沒有生成動畫。

Vue顯然跟蹤這些現在與:key並沒有發現它需要動畫這些孩子。

我猜這種情況的發生是因爲已經有部分列表，所以爲什麼要重新設置它們呢？我的列表可以完全重新排序，但我希望始終讓所有項目都具有動畫效果。

我可以清楚地看到，轉換類不會添加到轉換前後的元素。

我怎樣才能確保所有的元素都是動畫？

2017-08-01 Stephan-v

也許['V-move'（https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions）就是你需要 – Nora

正是我需要的東西，它在文檔中有點隱藏。隨時留下我可以接受的答案。 –

要動態位置的變化，你可以使用v-move

2017-08-01 14:47:06 Nora

回答