How to add click event for grid items for vue-grid-layout?

Question

I am using vue-grid-layout package -https://jbaysolutions.github.io/vue-grid-layout/guide/#npm and trying to add a click event for grid items. But, it seems like it is not working. How can I implement the click event for grid items?

<grid-layout
    ref="gridlayout"
    style="height:1000px"
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :responsive="true"
    :vertical-compact="true"
    :use-css-transforms="true"
    :preventCollision="true"
    :verticalCompact="false"
  >
    <grid-item
      :key="item.i"
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @click="widgetClicked(item)"
    >
      <GridComponent :grid_item="item" />
      <span class="content"></span>
    </grid-item>
  </grid-layout>

Answer 1

Basically the grid items in vue-grid-layout do not support @click or @mousedown events. And according to a contributor, you have to implement it yourself by adding a div. I am linking the github issue for your reference.

Github Issue for the same.