How to load tab items dynamically in Vuejs?-CodePudding

AppsTab.vue

<script>
export default {
  props: {
    tabList: {
      type: Array,
      required: true,
    },
    variant: {
      type: String,
      required: false,
      default: () => "vertical",
    },
  },
  data() {
    return {
      activeTab: 1,
    };
  },
};
</script>

<template>
  <div
    :
  >
    <ul
      
      :
    >
      <li
        v-for="(tab, index) in tabList"
        :key="index"
        
        :
      >
        <label
          :for="`${_uid}${index}`"
          v-text="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="`tabPanel-${index   1}`" /> --> want to get data using loop inside tab
      </div>
    </template>
  </div>
</template>

App.vue

< script >
  import AppTabs from "./components/AppTabs";

export default {
  components: {
    AppTabs,
  },
  data() {
    return {
      tabList: ["Tab 1", "Tab 2", "Tab 3", "Tab 4"],
    };
  },
}; <
/script>

<template>
  <div >
    <app-tabs
      
      :tabList="tabList"
      variant="horizontal"
    >
{{value}} // want to bind data inside tab
    </app-tabs>
  </div>
</template>

Expected Output

I am working on vertical tabs. Where the functionality is working fine. Here is the complete working code with static mock data https://codesandbox.io/s/vue-js-tabs-forked-we2cx?file=/src/App.vue

Now i want to create some mockdata inside of my data like 'tabList' and then, i want to display data dynamically when user clicked on tabs(including content -->tabs)

How to remove static data, which is inside slots and then only use data dynamically

To start with that, i am not sure, Where to start the looping to display data inside tabs dynamically with mock data?

CodePudding user response：

You can set dynamic slot name using :slot="slotName" where slotName is a dynamic value

This can be achieved using a v-for aswell like below.

<template v-for="content in contentList" :slot="content.slot">
  {{ content.content }}
</template>

Where contentList is your array something like below.

contentList: [
  { id: 1, slot: "tabPanel-1", content: "Content 1" },
  { id: 2, slot: "tabPanel-2", content: "Content 2" },
  { id: 3, slot: "tabPanel-3", content: "Content 3" },
  { id: 4, slot: "tabPanel-4", content: "Content 4" },
]

Working Fiddle