Issue when trying to show id dynamically in Vuejs?-CodePudding

AppTabs.vue

<template>
  <div
    :
  >
    <ul
      
      :
    >
      <li
        v-for="(tab, index) in tabList"
        :key="index"
        
        :
      >
        <label
          :for="`${_uid}${index}`"
          v-text="tab.tab"
          
        />
        <input
          :id="`${_uid}${index}`"
          type="radio"
          :name="`${_uid}-tab`"
          :value="index   1"
          v-model="activeTab"
          
        />
      </li>
    </ul>

    <template v-for="(tab, index) in tabList">
      <div
        :key="index"
        v-if="index   1 === activeTab"
        
      >
        <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" },

];

Where in the above code i have like ** :for="${_uid}${index}"** :id="${_uid}${index}" :name="${_uid}-tab" Where it generates an id for the input field.

Instead of generating an id for input fields to be able to use the labels for this input field. Can i use my own ID Because my API have field like DeptId ( i tried to integrate my api, Then i come to know that if in api i have field like id then only my api is working or else it is not working i have tested..)

So can u please tell me, What changes i need to make in order to remove the auto generation of an id for input fields. And keep my id instead So that it works please.

Because i dont want to generate id by itself. instead want to keep id which is comming from an api like(DeptId)... And getting many error when i tried removing the id generation and bind my data from an array

CodePudding user response：

First defining slot should have a name not id for non-default slot. So in AppTabs.vue you will have to change it to:

<slot :name="`tabPanel-${index   1}`" />

And to override these slots, you either use the v-slot="slot-name" or use the shorthand #. So you would need to change your code in App.vue

<template v-for="content in contentList" :v-slot="content.id">

Or v-slot:[dynamicSlotName] in case you are using vue3.

Now regarding your code. The slot name you create tabPanel-${index 1} will never be equal to the id you use in your parent component this code evaluates to the string "1-{{index 1}}". the slot name you defined will be overridden when you use v-slot with the name of the slot.

For more info i would suggest you read the slots doc in the website:

Vue2: https://v2.vuejs.org/v2/guide/components-slots.html

vue3: https://vuejs.org/guide/components/slots.html