Clusterize.js making element unclickable

[Osman-Rafi]

I'm trying to use Clusterize.js component to display large amount of data in my vue app. It's showing the dataset perfectly, however, while the clusterize element contains a button or something else which contains a click event, It's not working. I understand this component requires special click event fashion(described in docs FAQ), but can't find a way to use with dynamic data in vue app.

Here is the code sample

<div
      id="scrollArea"
      class="clusterize-scroll"
      style="height: 300px; overflow: auto"
    >
      <div id="contentArea" class="clusterize-content">
        <div v-for="item in dataSet" :key="item">
          <button @click="onClick(item)" data-action="onClick">
            button {{ item }}
          </button>
        </div>
      </div>
 </div>

 <script>
 mounted() {
    new Clusterize({
      scrollId: "scrollArea",
      contentId: "contentArea",
    });
  },

 </script>

Sandbox link: https://codesandbox.io/s/eloquent-tereshkova-wisf1?file=/src/App.vue

[benoitlahoz]

Same here in Vue 3. Did you ever find an answer to this?

[lowzonenose]

new Clusterize({
      scrollId: "scrollArea",
      contentId: "contentArea",
      callbacks : {
       clusterChanged : () => {
         this._updateListenersDOM();
       }
    }
});

Update the listeners each time a cluster changes