Closed
Description
Describe the bug
We run into an issue where passing attrs to BTab (In our example style. Also happens when @click is passed in) causes recursive error:
Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
The issue doesn't happen when we remove either of those:
- style / @click - attrs from BTab
- < slot :name="tab.identifier">
- not using v-for on BTab
Reproduction:
<b-tabs>
<b-tab
v-for="(tab, index) in [
{ identifier: 'Tab1', label: 'Tab 1' },
{ identifier: 'Tab2', label: 'Tab 2' },
]"
style="background-color: red"
:key="index"
:title="tab.label"
>
<slot :name="tab.identifier"></slot>
</b-tab>
</b-tabs>
BTab Snippet that seems to cause the issue:
const attrs = useAttrs()
const processedAttrs = computed(() => {
const {onClick, ...tabAttrs} = attrs
return {onClick, tabAttrs}
})
Reproduction
https://stackblitz.com/edit/github-ewezexj6?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue
Used Package Manager
pnpm