@change TabGroup - Error: Passing props on "template"! The current component <TabGroup /> is rendering a "template".

[ldanielduarte]

Following the Headless UI Tabs - listening for changes docs, I am trying to implement the onChange event in tabs.

<TabGroup
    :key="resetTabs"
    :defaultIndex="selectedTab"
    @change="changedTab"
>
    <TabList class="flex space-x-1">
        <Tab
            v-for="thing in things"
            :key="thing.id"
            v-slot="{ selected }"
            class="basis-1/3"
            as="template"
            :disabled="thing.id === 3"
        >
        </Tab>
    </TabList>
    <TabPanels class="mt-6">
        <TabPanel>
            ...
        </TabPanel>
        <TabPanel>
            ...
        </TabPanel>
        <TabPanel>
            ...
        </TabPanel>
    </TabPanels
</TabGroup>

However, when rendering the component where the tabs are, I get the following error:

Uncaught (in promise) Error: Passing props on "template"!

The current component is rendering a "template".
However we need to passthrough the following props:

• onChange

You can apply a few solutions:

• Add an as="..." prop, to ensure that we render an actual element instead of a "template".
• Render a single element as the child so that we can forward the props onto that element.

I understand the problem reported in the console, but since I am follwing de docs... is this something I am doing wrong or maybe is a bug?

@headlessui/vue@1.4.2
vue@3.2.26

[Mupati]

add a ref to Tab like this:

      <Tab
            v-for="thing in things"
            :key="thing.id"
            v-slot="{ selected }"
            class="basis-1/3"
            as="template"
            :disabled="thing.id === 3"
          ref="tabRef"
        >
        </Tab>
        ```

[RobinMalfait]

You are rendering a Tab with as=template which means that it will put all of its props to the first child (like the class prop). But you don't have any children so it will complain because there is no element to put your props on. The error messages gives you the solutions you want.

You can apply a few solutions:

• Add an as="..." prop, to ensure that we render an actual element instead of a "template".
• Render a single element as the child so that we can forward the props onto that element.

By default the Tab will render a button, so I would recommend you to just remove the as="template".

[akocero]

where do I put this as="template"?

[kiryls]

if you remove as="template" it stops rendering the selected tab, it says in the warning:

[Vue warn]: Property "selected" was accessed during render but is not defined on instance. 
  at <TabList> 
  at <TabGroup as="div" class="" > 
  at <HomePage>