Nuxt•3mo ago

Any way to specify a key for UTabs instead of index for v-model?

As per title... Just for maintainability I think it would be better.

3 Replies

Hi @aonghas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can specify a key for UTabs (from Nuxt UI) instead of using the index for v-model. The UTabs component supports using a unique value (such as a string key) for each tab by setting the value property on each item in the items array. Then, you can bind v-model to that value, not the index. Here’s an example from the official documentation:

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items: TabsItem[] = [
  {
    label: 'Account',
    value: 'account'
  },
  {
    label: 'Password',
    value: 'password'
  }
]

const active = ref('account')
</script>

<template>
  <UTabs v-model="active" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items: TabsItem[] = [
  {
    label: 'Account',
    value: 'account'
  },
  {
    label: 'Password',
    value: 'password'
  }
]

const active = ref('account')
</script>

<template>
  <UTabs v-model="active" :items="items" class="w-full" />
</template>

In this example, the v-model is bound to the value property (e.g., 'account', 'password'), not the index. This approach is more maintainable and robust, especially if the order of tabs might change or you want to reference tabs by a unique key rather than their position in the array. You can also use computed properties or sync the value with the route for even more control, as shown in the documentation's advanced examples UTabs: Control active item. So, you do not have to use the index; you can and should use a unique key via the value property for better maintainability. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@670239292840214568> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

aonghasOP•3mo ago

Thanks AI!

Gaming

Programming

Any way to specify a key for UTabs instead of index for v-model?

Did you find this page helpful?