Vue.JS，交錯轉換和加載更多

-2

VueJS指南使用項目索引爲數據集內的項目創建延遲轉換 - here具有非常簡潔的方法。如果你的數據集沒有改變，這個效果會非常好，但在我的情況下，我使用load more按鈕來獲取下一組記錄並將它們添加到我的數組中。由於加載延遲基於index，因此新項目不會立即生成動畫 - 它們正在等待現有項目在開始動畫之前進行動畫製作。有沒有人有一個乾淨的方式來重置呼叫之間的計時器的想法？Vue.JS，交錯轉換和加載更多

謝謝！

來源

2017-09-28 MPelletier

請顯示您的代碼 – thanksd

歡迎來到StackOverflow。請參考[tour]（http://stackoverflow.com/tour）瀏覽並閱讀[幫助中心]（http://stackoverflow.com/help），然後閱讀[如何提問] （http://stackoverflow.com/help/how-to-ask），[我應該避免問什麼類型的問題？]（http://stackoverflow.com/help/dont-ask）並提供[MCVE：最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。如果周圍的人可以輕鬆閱讀和理解你的意思，或者問題是什麼，他們會更願意幫忙:) – Dwhitz

1）傳遞正確key屬性。當用戶按加載更多按鈕時，您可能正在向API服務器發出AJAX請求。在大多數情況下，響應中的每個元素都將具有該項目的唯一ID。考慮：

[ 
 
    { id: 15, title: 'Page #15' }, 
 
    { id: 16, title: 'Page #16' }, 
 
    { id: 17, title: 'Page #17' } 
 
]

正如你所看到的 - 獨特的屬性這裏是id。您應該使用它作爲:key在v-for。

<span v-for="item in items" :key="item.id" class="list-item"> 
 
    {{ item }} 
 
</span>

2）正確改變數組。使用array.push(),array.splice()或更換陣列。還有就是要處理它的官方途徑： https://vuejs.org/v2/guide/list.html#Array-Change-Detection

3）確保CSS動畫是正確的。

請在下次請求幫助時提供一些代碼。因爲沒有代碼就很難找到問題。

來源

2017-09-28 21:04:34

Vue.JS，交錯轉換和加載更多

回答

相關問題