[Vue warn]: Component emitted event "request-append" but it is neither declared in the emits option nor as an "onRequest-append" prop.

[OrdinarySF]

Description

RT. Vue3

Steps to check or reproduce

<masonry-infinite-grid :column='2' :gap='10' align='start' @render-complete='renderComplete'>
      ...
    </masonry-infinite-grid>

[OrdinarySF]

Same issue is that need all impleement emit function?

emit 된 모든 function 을 구현해야 하나요? 지속적으로 경고가 표시됩니다.

In fact, this will not make the warning.

[WebDev2030]

Same problem. How to resolve it?

[OrdinarySF]

Same problem. How to resolve it?

ignore😂

[quninnd]

[swurtheone]

<template>
  <div ref="gridContainer">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import VanillaInfiniteGrid, { MasonryInfiniteGrid } from '@egjs/infinitegrid';

export default defineComponent({
  name: 'InfiniteGrid',
  props: {
    gap: {
      type: Number,
      default: 5,
    },
  },
  emits: ['requestAppend', 'changeScroll', 'requestPrepend', 'renderComplete', 'contentError'],
  setup(props, { emit }) {
    const gridContainer = ref<HTMLElement | null>(null);
    let grid: VanillaInfiniteGrid | null = null;

    onMounted(() => {
      if (gridContainer.value) {
        grid = new MasonryInfiniteGrid(gridContainer.value, {
          gap: props.gap,
        });

        grid.on('requestAppend', (e) => emit('requestAppend', e));
        grid.on('changeScroll', (e) => emit('changeScroll', e));
        grid.on('requestPrepend', (e) => emit('requestPrepend', e));
        grid.on('renderComplete', (e) => emit('renderComplete', e));
        grid.on('contentError', (e) => emit('contentError', e));
      }
    });

    return {
      gridContainer,
    };
  },
});
</script>

<style scoped>
/* Add your styles here */
</style>