List group

The web-list component is used to display a list of information. It can contain a content and trigger events. Lists present content in a way that makes it easy to identify a specific item.

Your first list-group component

Template

<web-list-group :items="items" @select="selectedItem">
</web-list-group>

Typescript

<script lang="ts" setup>
  import { reactive } from "@vue/reactivity";
  
  const items = reactive([
    { label: "Item 1" },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4" },
    { label: "Item 5" },
    { label: "Item 6" },
  ]);
  j
  function selectedItem(item: { label: string }) {
    console.log(item);
  }
</script>