VueJS 在更新前显示旧数据（图像）答案

【问题标题】：VueJS showing old data (images) before updatingVueJS 在更新前显示旧数据（图像）
【发布时间】：2021-11-17 19:31:17
【问题描述】：

对于使用 VueJS 的购物车应用程序，我有一个分页的产品列表。当用户打开页面时会获取所有产品，然后我使用页面变量来知道要显示哪些产品。当我从第 1 页转到第 2 页时，产品被新产品取代，但图像需要时间来改变。在我的电脑上大约需要 1 秒，而在我的手机上需要 2 秒。一些用户告诉我它甚至更长。问题是在加载时，它会显示上一页中另一个产品的图像。因此，在新页面上的几秒钟内，有些产品的名称和图像与其不对应。你知道为什么会这样吗？如果加载新图片需要时间，我宁愿在加载时什么都没有，而不是拥有上一页的图片。

我对 vutify v-autocomplete 有同样的问题，其中每个项目都有一个图像。

我的分页实现概述（我认为这不是问题，因为 v-autocompetes 有同样的问题）：


<div
   v-for="(product, i) in productsByIDPaginated"
   :key="i"
   >
<img
   v-if="product.imagesNumber > 0"
   @click.stop="toProductDetailsPage(product)"
   :src="imageUrl(product)"
   @error="replaceByDefault"
   />
<img
   v-else
   @click="toProductDetailsPage(product)"
   src="../assets/unknown2.jpg"
   />
</div>
<script>
   productsByIDPaginated() {
         return this.productsByIDFiltred.slice(
           this.numberProdsByPage * (this.page - 1),
           this.numberProdsByPage * this.page
         );
       },
    
</script>

【问题讨论】：

听起来像是一个指向更深层次问题的症状：(1) 为什么您的图像需要永远加载？它们有这么大吗？它们可能应该被优化，(2) 当从一个视图切换到另一个视图并加载异步数据（在这种情况下为图像）时，你可能想要一个加载状态。
我的图像大概是 50 kB 到 150 kB 应该小于这个吗？ + 如何实现加载状态？如何知道何时获取所有图像？
可能对您的具体问题没有帮助，但不要在v-for循环中使用索引作为:key...
@MichalLevý 为什么不用，用什么代替？

标签： javascript html vue.js vuetify.js

【解决方案1】：

看看产品和分页是如何实现的会很有帮助。

我会假设在获取新产品之前旧图像不会改变。假设您正在遍历产品，我最好的解决方法是确保在请求新产品时更改密钥。

【讨论】：

我添加了代码
我认为这实际上是一个关键问题，似乎可以通过将关键从 i 更新到 i + 页面来解决。但是为什么只影响图像而不影响产品名称呢？嗯
更新：毕竟它不起作用，尝试了低互联网和同样的问题

【解决方案2】：

这种行为的原因（在加载新图像之前在下一页（分页时）显示旧图像）缺少:key="" 道具，或者将index 的index 传递给此道具@ （和你一样）。

你应该：

如果有迭代项，则传递它的唯一 ID (:key="item.id")，或者
使用:key="index + pageNum * itemsCountPerPage"，或
作为解决方法，您可以将图像 URL 用作 key 属性。

因此，例如，对于第二种情况，如果您每页列出 10 个项目：在第一页上，项目的 ID (key prop) 从 0 到 9，在下一个页面上 - 从 10 到 19。

【讨论】：