Composition API + script setup Dynamic component

Question

I want to implement simple tabs using script setup and composition API

<script setup>
import Timeline from './Timeline.vue';
import Profile from './Profile.vue';
import Groups from './Groups.vue';

const currentTab = ref('Timeline')
const tabs = ref(['Timeline', 'Profile', 'Groups'])
</script>

<template>
    <div class="tabs">
       <div v-for="tab in tabs"
       :key="tab"
       @click="currentTab = tab" v-text="tab"

       <component :is="currentTab"></component>
    </div>
</template>

But this code will only result <timeline></timeline> instead of the actual content of the Timeline component.

h0p3zZ · Accepted Answer · 2022-12-23 02:09:03Z

2

As mentioned here when using the <script setup>-method you need to pass the actual object of the component to the :is instead of the string.

See this Example here

Here is also the code itself:

<script setup>
import Timeline from './Timeline.vue';
import Profile from './Profile.vue';
import Groups from './Groups.vue';
import { shallowRef } from 'vue';

const currentTab = shallowRef(Timeline);
const tabs = [Timeline, Profile, Groups];
</script>

<template>
    <div class="tabs">
       <div v-for="tab in tabs"
        :key="tab"
        @click="currentTab = tab" v-text="tab.__name">
      </div>

    </div>
  <keep-alive>
    <component :is="currentTab"></component>
  </keep-alive>
</template>

edited Dec 23, 2022 at 2:09

answered Dec 7, 2022 at 23:28

h0p3zZ

7374 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Composition API + script setup Dynamic component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related