Vue3 how to implement dynamic components with Composition API?

I want to use dynamic component functionality with Composition API in Vue3. I have no problem with Options API. I followed this instruction: link

There is my code:

<script setup>
import { ref } from "vue";
import General from "../components/ContractGeneral.vue";
import Networks from "../components/ContractDetails.vue";
const tabs = {
let currentTab = ref("Networks");

        <li v-for="tab in tabs" :key="tab" @click="currentTab = tab">
            <p>{{ tab }}</p>
        <component :is="tabs[currentTab]"></component>

and the problem is, that {{tab}} in my case shows a full component object, not just a name like ‘General’. It shows something like this: "src/components/ContractGeneral.vue", "__hmrId": "f8a99314" }

How can I fix this error?

>Solution :

You could get the tab key from the v-for loop as follows :

 <li v-for="(tab,key,index) in tabs" :key="tab" @click="currentTab = key">
     <p>{{ key }}</p>

Leave a Reply