NeXTs / Clusterize.js

Tiny vanilla JS plugin to display large data sets easily

Home Page:https://clusterize.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clusterize.js making element unclickable

Osman-Rafi opened this issue · comments

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

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