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>

Fanoflix · Accepted Answer · 2022-02-24 17:48:42Z

2

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.

answered Feb 24, 2022 at 17:48

Fanoflix

2,1392 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mrunall Veer Over a year ago

Thanks! It worked by calling a click event on v-container

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related