Reputation: 175
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?
Upvotes: 2
Views: 1302
Reputation: 1
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
}
Upvotes: 4