Dynamically adding one type of components in Vue

Question

I read an article "How to dynamically adding different components in Vue".

There is a good way to bind different component to tabs.

But I want to bind one type/name component, which would differ depending on the props and moreover one tab must correspond to one instance of the component with the corresponding props. Can I reuse my component in different tabs?

Something like:

<template>
  <button
          v-for="tab in tabs"
          v-bind:key="tab.name"
          v-bind:class="['tab-button', { active: currentTab === tab }]"
          v-on:click="currentTab = tab"
  >
        {{ tab.name }}
  </button>
  <component v-bind:is="currentTab.component" :id_1=currentTab.id_1 :id_2=currentTab.id_2></component>
</template>

<script>
import tab-component from "..."
var tabs = [
  {
    name: "WS1",
    component: "tab-component",
    uwb_id: "PL_DL_test",
    ws_id: "id_Ws_1"
  },
  {
    name: "WS2",
    component: "tab-component",
    uwb_id: "PL_DL_test",
    ws_id: "id_Ws_2"
  }
]

export default {
  components: {
    tab-component
  },
  data() {
    return {
      tabs: tabs,
      currentTab: tabs[0],
    }
  }

}

<script>

Is it possible to do something like that?

Thanks for answering!!!

Eduardo Eduardo · Accepted Answer · 2021-05-21T07:07:43

You can use computed property for that.

<template>
  <button
    v-for="(tab, index) in tabs"
    :key="tab.name"
    :class="['tab-button', { active: currentTabIndex === index }]"
    @click="currentTabIndex = index"
  >
    {{ tab.name }}
  </button>
  <component :is="activeTab.component" :prop1="activeTab.prop1 :prop2="activeTab.prop2"></component>
</template>


export default {
  components: {
    tab-component
  },
  data() {
    return {
      tabs: [
        {
          name: "WS1",
          component: "tab-component",
          uwb_id: "PL_DL_test",
          ws_id: "id_Ws_1"
        },
        {
          name: "WS2",
          component: "tab-component",
          uwb_id: "PL_DL_test",
          ws_id: "id_Ws_2"
        }
      ],
      currentTabIndex: 1
    }
  },
  computed: {
    activeTab () {
      return this.tabs[this.currentTabIndex]
    }
  }

}

Dynamically adding one type of components in Vue

1 Answers