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

slot name type will lose in a specific dom structure. #4443

Open
Kanade-Lu opened this issue Jun 5, 2024 · 2 comments
Open

slot name type will lose in a specific dom structure. #4443

Kanade-Lu opened this issue Jun 5, 2024 · 2 comments

Comments

@Kanade-Lu
Copy link

Vue - Official version

2.0.19

Link to minimal reproduction

https://play.vuejs.org/#eNqtVl9P2zAQ/yq3TBog0fZhe8pKp63ioXvYEER7ITyE5FJCHTuynRaE+O4723GShhSBtr60vjvf/fy7f30KvlfVdFtjEAbzD5MJRKi0OcNksoj5XGNZsUQj/Qb6zLNi2/ykw1KUlT8AhDq5ZThJBatLTl88L9ZncWClSytcWlkc+DsLaG/b2OpO1CwDLjSglEJCwjPAB408U3D7CCsDzgHzQVuA8FGT8ooJ3dfOBvjbUL17LFHa4VOLRGW9O/1Q85l5radh5nkYRLAilcqi0qBQ1xWwhFsWVBxYi6KshNRgnEEuRQlHU+vZcH5kDbhGmScp0nOH1M0jOCNSHhfw5IBUUlQhbPBR5BDBJ1BaFnztdIIvWZFuvoVwLMUuhOgUXG5IQj7ohIz9SViNXlDwDB/owOvyFuUJnC2g5hsudtx4fB6iM8locAiZoVxlYQPgq5P6jAzEEjPEcsVzEfr7znZgZwMCrIXI1OuWJCw0w/H7qdgStjJZk77zUldMJFkjHrtWySJtVe37qazp1S9qOhxLlmVocX1DObu+ccXiSsMWQnBKReG6ZHqvBKcGtODiIKVyKBjK35UuKFwctI+Pg4QxsftpZVrWeOrl6R2mmxH5vXowsji4kKhQbjEOWp1O5Bq1U59f/aJG6ylLkdWMrF9RXqKi5xqMzuxHzTOC3bOzaFe24onESJ2bXlb+UQaoJdbaxwF1gOmEQ0/v4H6efmkS8kws+u4xE+xQ68EaOVJC6RjtNyIV/l4vNuemHWP+jnY83Iz/txXp3TGp84LjBYVUcxv9bTUZUT2Sh8XxCQ33rhxfTnqqVk/NdpILScwVZELAXkZqGO2N14+pkBLT4bC2k1fRRICQJyU2PqeGOMrRrBm47/DVTXHiI6mZ9gvnUuz2UJmxfDju6MZ4NxjaCcRVkXv3TdYJR7cvGntnikz1F9PbMRpv4/Dc3jywInvgyKWnjNCNbcneLYOzM/8nUrt12lSX+ZPRqamdew047GhCerBie/9MHCgHwDO/ByF4/gvLZtH3

Steps to reproduce

    <anyComp v-for="item in tableColumnConfig">
        <!-- #correct -->
        <!-- <slot :name="item.prop" /> -->

        <!-- #correct -->
        <!-- <template #default="tableRow">
          <slot :name="item.prop" />
        </template> -->

        <!-- #correct -->
        <!-- <div v-if="item.onClick"></div>
        <div v-else>
          <slot :name="item.prop" />
        </div> -->

        <!-- #error, lose type -->
        <template v-if="item" #default></template>
        <template v-else #default>
          <slot :name="item.prop" />
        </template>
      </anyComp>
<template>
  <Comp :table-column-config="tableColumnConfig">
    <!-- should not error and extends by ITest -->
    <template #testSlot>
    </template>
  </Comp>
</template>
  
<script setup lang="ts">
import Comp from './Comp.vue'
interface ITableColumnConfig<T = any> {
  prop: keyof T & string
  onClick?: (row: T, column?: any, cellValue?: any, index?: number) => unknown
}
interface ITest {
  orderId: string;
  testSlot: string;
  redeemInfo: {
    test: string;
  }
  goods: {
    test: string;
    title: string;
  }
  coverImage: {
    uploadImage: string;
  }
  price: string
}
const tableColumnConfig: ITableColumnConfig<ITest>[] = []
</script>

I think the key error point is "slot in template v-if v-else with #default"

@KermanX
Copy link
Contributor

KermanX commented Jun 17, 2024

I think this can be solved by vuejs/core#11150.

Currently, the Vue compiler removes the <slot v-else ... element in Comp.vue, so that Volar can't analyze it.

@Kanade-Lu
Copy link
Author

vuejs/core#11150

Really appreciate for your response! Next time, I will first check the compilation result to identify the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants