I am trying to make a simple page that has a handful of tabs which show different content, using dynamic components with the <component> tag. I recently learned about Composition API and wanted to try it out, but it is giving me some problems.

App.vue:

<template>
  <page-header :tabs="allTabs" @change-tab="changeTab"></page-header>
  <component :is="activeTab"></component>
</template>

<script setup>
import { ref, reactive } from "vue";
import PageHeader from "./components/PageHeader.vue";
import MainTab from "./components/views/MainTab.vue";
import ChartTab from "./components/views/ChartTab.vue";
import FeedbackTab from "./components/views/FeedbackTab.vue";

const dummyArr = [MainTab, ChartTab, FeedbackTab];

const activeTab = ref("main-tab");
const  allTabs =  [
         { name: "main", selected: true },
         { name: "chart", selected: false },
         { name: "feedback", selected: false }
       ];

function changeTab(selection) {
  let currTab = allTabs.findIndex((tab) => tab.selected === true),
    nextTab = allTabs.findIndex((tab) => tab.name === selection);
  allTabs[currTab].selected = false;
  allTabs[nextTab].selected = true;
  activeTab.value = `${selection}-tab`;
}
</script>

dummyArr is simply to prevent the compiler from yelling at me for not using MainTab or any of the other ones. Also, changeTab returns the name of the navbar selection from allTabs

Each of the imported components look something like this, for testing purposes:

<template>
  <h1> Main Tab </h1>
</template>

My problem is that when I load my dev server, the header (and internal nav bar) render fine, and there are no errors, but none of the components render to the page. I have been finding a lot of information online about dynamic components and typescript, but they don't add any clarification to my problem. (I also don't use typescript, so that further confuses things...)

What is causing my components not to load dynamically to the page?

CodePudding user response：

The dynamic component should be component instances not strings:

Since components are referenced as variables instead of registered under string keys, we should use dynamic :is binding when using dynamic components inside <script setup>.

Try to convert the dummyArr to an object components that takes the component name as key and its instance as value:

 const components= {'main':MainTab, 'chart':ChartTab,'feedback': FeedbackTab};

const activeTab = ref(MainTab);
const  allTabs =  [
         { name: "main", selected: true },
         { name: "chart", selected: false },
         { name: "feedback", selected: false }
       ];

function changeTab(selection) {
  let currTab = allTabs.findIndex((tab) => tab.selected === true),
    nextTab = allTabs.findIndex((tab) => tab.name === selection);
  allTabs[currTab].selected = false;
  allTabs[nextTab].selected = true;
  activeTab.value = components[selection];//<-- get the component instance
}