jd-solanki / anu

Anu - DX focused utility based vue component library built on top of UnoCSS & VueUse ⚡️🔥

Home Page:https://anu-vue.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`v-model` for ATabs component doesn't support non-numeric `value`

boonyasukd opened this issue · comments

I'm currently using ATabs components with dynamic AViews. This setup works fine until I attempted to preselect an active tab with v-model, which crashed the component.

FYI, each tab is defined as an object with title, value, icon fields, similar to what's shown in documentation:

const tabs = [
  {
    title: 'Account',
    value: 'account',
    icon: 'i-bx-user',
  },
  {
    title: 'Notifications',
    value: 'notifications',
    icon: 'i-bx-bell',
  },
  {
    title: 'Settings',
    value: 'settings',
    icon: 'i-bx-cog',
  },
]

Upon further investigation, I believe the offending line is here. Basically, with the way it is now, passing in a value (of type string) as an array index obviously won't work.

As a workaround, I'm omitting value field for each tab object, and use index for slot names (i.e., <template #0>, etc.). And now the component no longer crash. Though this is ok, it'd be nice if ATabs also properly supports value strings.