AppTabs.vue
<template>
<div
:class="{
'flex space-x-4': variant === 'horizontal',
}"
>
<ul
class="
list-none
bg-opacity-30
p-1.5
rounded-lg
text-center
overflow-auto
whitespace-nowrap
"
:class="{
'flex items-center mb-6': variant === 'vertical',
}"
>
<li
v-for="(tab, index) in tabList"
:key="index"
class="w-full px-4 py-1.5 rounded-lg tabs"
:class="{
'text-blue-600': index + 1 === activeTab,
'text-black': index + 1 !== activeTab,
}"
>
<label
:for="`${_uid}${index}`"
v-text="tab.tab"
class="cursor-pointer block"
/>
<input
:id="`${_uid}${index}`"
type="radio"
:name="`${_uid}-tab`"
:value="index + 1"
v-model="activeTab"
class="hidden"
/>
</li>
</ul>
<template v-for="(tab, index) in tabList">
<div
:key="index"
v-if="index + 1 === activeTab"
class="flex-grow rounded-lg p-4 tab-content tabs-cont-ht"
>
<slot :name="index + 1" />
</div>
</template>
</div>
</template>App.vue
export const datalist = [
{
id: 1, tab: "Tab 1a", val: "1", content: "Content 1"
},
{ id: 2, tab: "Tab 2", val: "2", content: "Content 2" },
{ id: 3, tab: "Tab 3", val: "3", content: "Content 3" },
{ id: 4, tab: "Tab 4", val: "4", content: "Content 4" },
];How can I modify the code above to use my own custom IDs instead of auto-generated ones for input fields? My API requires specific field names like DeptId, but when I tried integrating it, I encountered errors due to the automatically generated IDs. Can you please advise on the changes needed to remove the auto-generation of IDs and use my own provided IDs from the API?
I have tested removing the ID generation and binding data from an array but faced multiple errors. Please guide me on how to successfully replace the autogenerated IDs with my specified IDs like DeptId.