NuxtN
Nuxt•2y ago•
3 replies
Laurent.C

Typescript Error with dynamic slots.

Hi everyone,

I recently updated my project and while the app is still functioning, I'm encountering a TypeScript (tsc) error.
I'm familiar with this type of error when it comes to objects and dynamic indexes in TypeScript, but I'm not sure how to resolve it in the context of slots.

Has anyone else faced a similar issue or can provide some guidance on how to fix this?

Thanks for your help!

<script setup lang="ts" generic="T extends EntityInterface">
  import type {EntityInterface} from '~/types/entity'
  import type {ReadonlyHeaders} from '~/types/headers'

  interface Props {
    headers?: ReadonlyHeaders
    data: Array<T>
    loading: boolean
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
  })

  const slots = useSlots()

  const slotKeys = computed(() => Object.keys(slots))

</script>

<template>
  <VDataTable   
    :headers="headers"
    :items="data"
    :loading="loading"
    class="elevation-1"
  >
    <template
      v-for="key in slotKeys"
      #[`item.${key}`]="props"
      :key="key"
    >
      <slot
        :name="key"
        v-bind="props"
      >
        {{ props.value }}
      </slot>
    </template>
  </VDataTable>
</template>

<style scoped></style>
image.png
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy