Dynamic component doesn't display anything in Vue3?

Question

I have a dynamic component in my project like that can be "Login" or "RegisterForm"

But it doesn't display anything.

<script setup lang="ts">

import { ref } from "vue";
import RegisterForm from '@/components/Layout/Navbar/Register.vue'
import Login from '@/components/Layout/Navbar/Login.vue'


let activeComponent = ref('Login')
</script>

<template>
<button @click="activeComponent='RegisterForm'">change to register</button>
  <component :is="activeComponent" />
</template>

How can I fix this?

kissu · Accepted Answer · 2022-05-13 16:28:22Z

3

I'm not sure if this is the exact best way to write that in Composition API but this works without any error/warning.

<script setup>
import { shallowRef } from "vue";

import CompA from "@/components/CompA.vue";
import CompB from "@/components/CompB.vue";

const activeComponent = shallowRef(CompA);
</script>

<template>
  <button @click="activeComponent = CompB">toggle to Component B</button>
  <component :is="activeComponent" />
</template>

answered May 13, 2022 at 16:28

kissu

47.3k16 gold badges94 silver badges197 bronze badges

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

Collectives™ on Stack Overflow

Dynamic component doesn't display anything in Vue3?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related