Question

VueJS指南有一个非常巧妙的方法，可以使用项目索引为数据集中的项目创建延迟转换 - here。如果您的数据集没有变化，这非常有效，但在我的情况下，我使用load more按钮获取下一组记录并将它们添加到我的数组中。由于加载延迟基于index，因此新项目不会立即生成动画 - 它们会在开始之前等待现有项目制作动画。有没有人有一个干净的方法来重置呼叫之间的计时器？

谢谢！

Answer 1

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动画正确。

请在下次寻求帮助时提供一些代码。因为没有代码就很难找到问题。

Vue.JS，交错过渡和加载更多

1 个答案: