时间戳

首页 > 解决方案 > Vue：过滤集合时不更新v-for下面的img标签

javascript - Vue：过滤集合时不更新v-for下面的img标签

问题描述

我有一个 vue 应用程序，我在其中使用 v-for 迭代一个对象数组。迭代工作正常，一切都正确输出。

但是，当我过滤对象列表时，只会更新一些子元素。特别是我的 img-tags 的 src 和 srcsets 没有更新。

请注意，我最初使用 vue-lazysizes 加载图像。

我的代码如下：

<label v-for="(option, index) in options" :key="index">
    <div class="collection__item__image">
        <img ref="itemThumb" :alt="option.imageAlt" class="lazyload" v-bind:data-src="option.imageThumb" v-bind:srcset="'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='" v-bind:data-srcset="option.imageThumb">
    </div>
</label>

过滤选项集合时，元素也会更新，包括 data-src 和 data-srcset，但 src 和 srcset 元素没有更新，这意味着它们反映了一些旧数据。

我是否需要做一些事情来确保 src 和 srcset 字段也被更新？

标签： javascriptvue.js

解决方案

看来我的问题出在我使用的 :key 中。我只是使用了索引，这不是一个好主意:)。我现在已经为用户更改了一个正确的密钥（我的选项有一个可以使用的 id），然后它就可以工作了。

现在的代码是：

<label v-for="(option, index) in options" :key="option.id">
    <div class="collection__item__image">
        <img ref="itemThumb" :alt="option.imageAlt" class="lazyload" v-bind:data-src="option.imageThumb" v-bind:srcset="'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='" v-bind:data-srcset="option.imageThumb">
    </div>
</label>

推荐阅读