По понятным причинам я использую Vue-Lazyload.js (https://www.npmjs.com/package/vue-lazyload) в моем проекте Vue.
Я успешно реализовал это на протяжении всего проекта. Но теперь я столкнулся с проблемой, которую не могу исправить.
У меня есть петля v-for с брендами, а для загрузки логотипа используется v-html. Это не идеально, но необходимо для моего проекта.
<div class="col-6 col-md-3 col-lg-2" v-for="brand in brands">
<a class="brand" :href="brand.url" v-html="brand.logo" v-lazy-container="{ selector: 'img' }"></a>
<a class="brandname" :href="brand.url">
{{brand.name}}
</a>
</div>
v-html выглядит так:
<img class="brand-logo" data-src="img/src/here">
Как видите, я использую v-lazy-container с селектором на 'img'.
Теперь, помимо перечисления логотипов, у меня есть некоторые данные, которые меняются в моем экземпляре Vue, но каждый раз, когда меняются любые данные, ВСЕ логотип начинает перезагружаться, как будто вся виртуальная DOM перезагружается.
В других случаях это работало, чтобы установить ключ на изображении. Но это не так в этом случае.
Предложения кого-нибудь?