When switching the code-group label, the first content will not change

peterroe commented 4 months ago

Environment

https://undocs.pages.dev/guide/components

Reproduction

https://github.com/unjs/undocs/assets/59404696/d8f210ce-4a03-43de-b1d3-f01ac1f60688

Describe the bug

I tried to investigate. The problem is <codeGroup /> component from @nuxt/ui-pro:

// @nuxt/ui-pro/modules/pro/runtime/components/global/CodeGroup# 55-63
const tabs = computed(() => slots.default?.().map((slot, index) => {
  return {
    label: slot.props?.filename || slot.props?.label || `${index}`,
    icon: slot.props?.icon,
    component: slot
  }
}) || [])

const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))

For some unknown reason, the change of selectedTab did not trigger component switching.

 <component :is="selectedTab?.component" hide-header />

I don't sure if this is a bug from vue, a @nuxt/ui-pro problem, or other possibilities

Additional context

No response

Logs

No response

pi0 commented 4 months ago

/cc @benjamincanac

benjamincanac commented 4 months ago

@pi0 Is this https://github.com/unjs/undocs/blob/main/app/components/global/Pm-Install.vue? I'll try to reproduce!

pi0 commented 4 months ago

Thanks. Yes all pm- switchers have this issue.

benjamincanac commented 4 months ago

@pi0 Not sure why this happens but adding a key to each ProseCode fixes the issue.

pi0 commented 4 months ago

Nice find! Do you mind to make a PR i can quickly release? 🙏

unjs / undocs