medium-zoom pagination issues

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 v-else>
        <div class="m-3" v-for="(item, imageIndex) in pageOfItems" :key="">
            <div class="row mt-3">
              <div class="col-lg-9 my-auto" v-html="item.mytext">
              <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'">
          <hr class="hr1">
<div class="pb-0 pt-3 text-center">
  <jw-pagination :items="info" :pageSize="10" @changePage="onChangePage"></jw-pagination>

import mediumZoom from 'medium-zoom'
import axios from 'axios'
export default {
  data () {
    return {
      info: [],
      pageOfItems: [],
      loading: true
  mounted () {
      .then(response => ( =
      .finally(() => (this.loading = false))
  updated () {
    mediumZoom(('article img'), {
      background: 'transparent'
  methods: {
    onChangePage (pageOfItems) {
      // update page of items
      this.pageOfItems = pageOfItems

1 thought on “medium-zoom pagination issues”

  1. You will pretty much need to detach the event listeners here. Because it should be a lot of them added everytime due to the updated hook.

    A naive implementation would be to add mediumZoom on the mounted hook. And when you do have a new changePage event, to detach it from all the images, then to apply it to the new ones with the same mediumZoom 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.

    enter image description here


Leave a Comment