Having trouble loading a lazy component in Vue3 with v-if condition?

Question

Having trouble loading a lazy component in Vue3 with v-if condition?

The code is quite simple. However, I am facing an issue where the about component cannot be rendered.

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    about: () => import("@/views/About.vue")
  },
  setup() {
    const sh = ref(false);
    return {
      sh
    };
  }
  // data: () => ({
  //   sh: false
  // })
});
</script>

I have tested this in a vue2 project using JS and vue2.6.11, and everything seems to work fine as usual.

Do you think it could be a bug or am I missing something? Your input would be greatly appreciated. Thank you.

typescript vue.js vuejs3

Answer 1

Answer №1

Definitely! However, it is important to declare the lazy component in the following manner.

about: () => defineAsyncComponent(() => import("@/views/About.vue")) // incorrect way

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
// Alternatively, lazy components can be declared here as well
//const about = defineAsyncComponent(() => import("@/views/About.vue"));
export default defineComponent({
  components: {
    about: defineAsyncComponent(() => import("@/views/About.vue"))
  },
  data: () => ({ sh: false })
});
</script>

Answer 2

Definitely! However, it is important to declare the lazy component in the following manner.

about: () => defineAsyncComponent(() => import("@/views/About.vue")) // incorrect way

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
// Alternatively, lazy components can be declared here as well
//const about = defineAsyncComponent(() => import("@/views/About.vue"));
export default defineComponent({
  components: {
    about: defineAsyncComponent(() => import("@/views/About.vue"))
  },
  data: () => ({ sh: false })
});
</script>

Answer 3

Answer №2

<template>
 <div>
    <h1>Hello World!</h1>
    <component :is="name"/>
    <button @click="onClick">Click me !</button>
 </div>
</template>

<script>
import { defineAsyncComponent, defineComponent, ref, reactive, computed } from "vue"

export default defineComponent({
  name: 'MyApp',
    components: {           
      section: defineAsyncComponent(() => import("../views/Section.vue")),
    },
    data: () => ({
      cardItems: [],
            show: false
    }),
    setup () {
      const display = ref(false);
      const dynamicComponent = computed (() => display.value ? defineAsyncComponent(() => import("../views/AddItem.vue")) : '')

      const onClick = () => {
          display.value = !display.value;
      }               
       
      return {          
          onClick,
          dynamicComponent,
          display
      }
  }
})
</script>

Answer 4

<template>
 <div>
    <h1>Hello World!</h1>
    <component :is="name"/>
    <button @click="onClick">Click me !</button>
 </div>
</template>

<script>
import { defineAsyncComponent, defineComponent, ref, reactive, computed } from "vue"

export default defineComponent({
  name: 'MyApp',
    components: {           
      section: defineAsyncComponent(() => import("../views/Section.vue")),
    },
    data: () => ({
      cardItems: [],
            show: false
    }),
    setup () {
      const display = ref(false);
      const dynamicComponent = computed (() => display.value ? defineAsyncComponent(() => import("../views/AddItem.vue")) : '')

      const onClick = () => {
          display.value = !display.value;
      }               
       
      return {          
          onClick,
          dynamicComponent,
          display
      }
  }
})
</script>

Having trouble loading a lazy component in Vue3 with v-if condition?

Answer №1

Answer №2

Similar questions

Guide on implementing a template within a form using Vue.js

In JavaScript, what do we call the paradigm where a variable equals a variable equals a function? Let's take

What steps are involved in generating a Typescript module definition for a directory containing a babel-plugin-content-transformer?

Encountering Invalid Chai attribute: 'calledWith'

What is the reason for recursion not producing a new object as output?

Ensure that all files with the extension ".ts" take precedence and are imported

"Exploring the process of integrating a new language into the vuejs3-datepicker feature

Using Laravel Blade, import a Vue.js component directly into your file

Master the art of utilizing watchers and computed properties for intricate computations

generating declaration files for components with accurate type definitions from propTypes

Formula for determining the slider's span

How can I transfer checkbox selections from a dynamically generated table row to an Array in Vue?

Bringing in information from a TypeScript document

Update the image path in Vue depending on the size of the screen

What is the process for including an item in an array within Firestore?

Developing components through JavaScript

Stopping Vue Router from re-rendering the page: Is it possible?

Integrating Typescript into function parameters

Encountering incorrect month while utilizing the new Date() object

What is the best way to organize nestedGroups in the vis.js timeline?