Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.4.0 generic component prop passed as slot item not typed correctly #2639

Closed
uino95 opened this issue Apr 21, 2023 · 0 comments
Closed

1.4.0 generic component prop passed as slot item not typed correctly #2639

uino95 opened this issue Apr 21, 2023 · 0 comments
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@uino95
Copy link

uino95 commented Apr 21, 2023

After upgrading to v1.4.0 from v1.2.0 I get a typescript error on props typed as generic and then binded to slot.

Basically I have a generic component as follow

<template>
    <div v-for="item in props.items" :key="item.index" >
      <slot :item="item" name="content" />
    </div>
</template>

<script setup lang="ts" generic="T extends {index: number}">

const props = defineProps<{
  items: T[];
}>();

</script>

and then I have a page which is using this generic component as follow:

<template>
   <GenericComponentList :items="items">
      <template #content="{ item }">
          <div>{{ item.name }}</div>
      </template>
    </GenericComponentList >
</template>

<script setup lang="ts">

type ShowCaseItem = {
  name: string;
  icon: string;
  action: () => void;
  index: number;
};

const items: ShowCaseItem[] = [
  {
    name: 'Instagram Follow Up',
    action: () => {
      console.log('open IG');
    },
    icon: 'instagramIcon',
    index: 0,
  },
  {
    name: 'Email Follow Up',
    action: () => {
      console.log('open email');
    },
    icon: 'envelopeIcon',
    index: 1,
  },
]
</script>

Before upgrading to v1.4.0 from 1.2.0 everything was fine and the item binded from the genericComponent was typed correctly as ShowCaseItem. Now it is type as an object {index: number}, which is the one that I extend from. I have removed the vuecompilerOptions "experimentalRfc436": true, since it is signaled as depecrated by Volar. Nevertheless with or without that options is giving me the same error.

Is this functionality still available in 1.4.0 ? Am I doing something wrong ?

@johnsoncodehk johnsoncodehk added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first labels Apr 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

No branches or pull requests

2 participants