Bootstrap-vue ленивая загрузка показывает старое изображение - PullRequest
Новая
       52

Bootstrap-vue ленивая загрузка показывает старое изображение

0 голосов
/ 21 октября 2019

Я использую Nuxt для своего веб-приложения, и у меня есть список элементов с изображениями. Для отложенной загрузки изображений я использую компонент https://bootstrap -vue.js.org / docs / components / image , и он работает нормально.

Пример моего использования: 

<div class="item">
   <b-img-lazy :src="imageUrl" />
</div>

Проблема, возникающая, когда я выполняю фильтрацию своих элементов, потому что представления повторно используются, и когда я фильтрую (скажем, это было 10, а теперь только 1), элемент будет иметь изображение другого элемента, пока не станет его изображение. будет загружен.

Таким образом, в основном, вместо того, чтобы видеть пустое изображение для нового элемента, я могу видеть изображение элемента, который ранее имел ту же позицию.

Есть ли способ сбросить старое изображение?

1 Ответ

1 голос
/ 21 октября 2019

v-bind:key может быть вашим другом здесь. Привязка ключа приведет к полной повторной визуализации компонента, а не просто к исправлению того, что изменилось в компоненте. 

<div class="item">
   <b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>

Документы здесь: https://vuejs.org/v2/guide/list.html#Maintaining-State

...