Vue.js Toggle vuecomponents-CodePudding

I have a very simple Vue application I am building. I am new with using Vue.js. I have 2 vue components and I am trying to toggle between them with a button click. Can I use script code on the main page to toggle between the 2 vue components? Here is my code. I assume I have to use v-show or v-if on the components or a div/span around the components to show and hide them.

    App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Display v-if="show" />

   


      <button v-on:click="toggleDisplay()">toggle btn</button>
  </div>


</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import Display from './components/Display.vue'

export default {
    name: 'App',
    components: {
      HelloWorld,
      Display
    },
    data: {
        return {
            selectedComp: "HelloWorld"
        }
    },
    methods: {
        toggleDisplay(comp: string) {
            this.selectedComp = comp;
        }
    }
}
</script>

Display.vue
<template>
    <div >
        <div v-if="loading" >
            Loading...
        </div>

        <div >
            <div  style="width:100%;">
                <div >
                    Service Title for Page
                </div>
            </div>
        </div>

        <div v-if="byteArray" >

            <img :src="byteArray" />

            <div>{{ createImage }}</div>
            <p>{{ byteArray }}</p> 
        </div>

    </div>

</template>
<script lang="js">
    import Vue from 'vue';

    export default Vue.extend({
        data() {
            return {
                loading: false,
                post: null,
                byteArray: null
            };
        },
        created() {
            this.fetchByteArray();

            // Hide DisplayVue after 5 seconds
            //setTimeout(() => this.byteArray = false, 5000)
            //.then(
            //    setTimeout(() => this.byteArray = true, 2000)
            //    );
            setTimeout(() => this.img = false, 5000)
                .then(
                    setTimeout(() => this.img = true, 2000)
                );
        },
        //watch: {

        //}
        methods: {
            fetchByteArray() {
                this.post = true;
                this.byteArray = true;
                this.loading = null;

                
                fetch('https://localhost:5001/api/Doc/image001.png')
                    .then(response => response.json())
                    .then(bytes => {
                        this.byteArray = "data:image/png;base64,"   bytes;
                        this.loading = false;
                        return;
                    })
                    .catch(console.log("Error"));
            }
        },
        computed: {
            createImage() {
                return `<img  src="data:image/png;base64,`   this.byteArray   `" />`;
            }
        }
    });
</script>

CodePudding user response：

Give a try to that one: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

Mainly like here: https://stackoverflow.com/a/73029625/8816585

<script setup>
import { ref } from "vue"

import Hehe from "@/components/Hehe.vue"
import Nice from "@/components/Nice.vue"

const boolean = ref(true)
</script>

<template>
  <component :is="boolean ? Hehe : Nice" />
  <button @click="boolean = !boolean">toggle</button>
</template>