In my project I use medium-zoom with pagination. On first page it works well but on second, third, fourth… i have to click several times for close image…on second page…two times, on third 3 times…
it seems to be a problem with maybe any index number?
here is my code:
<div v-if="loading" class="text-center">
<i class="fas fa-spinner fa-pulse fa-5x"></i>
</div>
<div v-else>
<div class="m-3" v-for="(item, imageIndex) in pageOfItems" :key="item.id">
<div class="row mt-3">
<div class="col-lg-9 my-auto" v-html="item.mytext">
</div>
<div class="col-lg-3 my-auto text-center">
<article class="container">
<img class="img-thumbnail" :src= "'http://localhost:4000/api/galeria/' + item.galeriaId + '_f.jpg'">
</article>
</div>
</div>
<hr class="hr1">
</div>
</div>
<div class="pb-0 pt-3 text-center">
<jw-pagination :items="info" :pageSize="10" @changePage="onChangePage"></jw-pagination>
</div>
<script>
import mediumZoom from 'medium-zoom'
import axios from 'axios'
export default {
data () {
return {
info: [],
customLabels,
pageOfItems: [],
loading: true
}
},
mounted () {
axios
.get('http://localhost:4000/api/fetch_galeria.php/')
.then(response => (this.info = response.data))
.finally(() => (this.loading = false))
},
updated () {
mediumZoom(('article img'), {
background: 'transparent'
})
},
methods: {
onChangePage (pageOfItems) {
// update page of items
this.pageOfItems = pageOfItems
}
}
}
</script>
You will pretty much need to
detach
the event listeners here. Because it should be a lot of them added everytime due to theupdated
hook.A naive implementation would be to add
mediumZoom
on themounted
hook. And when you do have a newchangePage
event, to detach it from all the images, then to apply it to the new ones with the samemediumZoom
call.Below is a way to see which event listeners (and probably how many) you have linked to a specific VueJS component. Select it in the Vue devtools and then, you will have access to the element’s properties via
$vm0
.