Events ​

Many events can be listened to each GridItem, so that you can be notified when a item changed.

Working example here.

<template>
  <GridLayout
    v-model:layout="layout"
    :row-height="30"
    @layout-before-mount="layoutBeforeMount"
    @layout-mounted="layoutMounted"
    @layout-ready="layoutReady"
    @layout-updated="layoutUpdated"
    @breakpoint-changed="breakpointChanged"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @resize="resize"
      @move="move"
      @resized="resized"
      @container-resized="containerResized"
      @moved="moved"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>

GridLayout ​

layout-before-mount ​

Layout beforeMount event.

Emited on the component beforeMount lifecycle hook.

function layoutBeforeMount(newLayout: Layout): void

layout-mounted ​

Layout mounted event.

Emited on the component mounted lifecycle hook.

function layoutMounted(newLayout: Layout): void

layout-ready ​

Layout ready event.

Emited when finish all the operations on the mount lifecycle hook.

function layoutReady(newLayout: Layout): void

layout-updated ​

Layout updated event.

Emitted every time the layout has finished updating and positions of all items are recalculated.

function layoutUpdated(newLayout: Layout): void

breakpoint-changed ​

Breakpoint Changed event.

Emitted every time the breakpoint value changes due to window resize.

function breakpointChanged(newBreakpoint: Breakpoint, newLayout: Layout): void

GridItem ​

move ​

Move event.

Emitted every time an item is being moved and changes position.

function move(i: number | string, newX: number, newY: number): void

resize ​

Resize event.

Emitted every time an item is being resized and changes size.

function resize(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void

moved ​

Moved event.

Emitted every time an item is finished moving and changes position.

function moved(i: number | string, newX: number, newY: number): void

resized ​

Resized event.

Emitted every time an item is finished resizing and changes size.

function resized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void

container-resized ​

Container Resized event.

Emitted every time the item or layout container resized.

function containerResized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void