"Experience the power of Vue.js 3.2 with Dynamic Component Knockout

Question

"Experience the power of Vue.js 3.2 with Dynamic Component Knockout

I am trying to use a dynamic component to update my section, but when I click on my sidebar ('nav'), it doesn't change. Even though route.params.current changes, the component is not loaded.


<template>
  <q-page class="container q-py-lg">
    <div class="q-pa-md row q-gutter-md">
      
      <nav class="col">
        <ul>
          <li v-for="(link, i) in links" :key="i" :class="link.label === route.params.current ? 'active' : 'cursor-pointer'" @click="router.push({ name: 'settings', params: { current: link.label }})">
            <span><q-icon size="xs" class="icon q-mx-sm" :name="link.icon"></q-icon></span>
            <span>{{  t(link.label) }}</span>
          </li>
        </ul>
      </nav>

      <section class="col-xs-12 col-md-6 col-lg-9">
        <q-card flat class="bg-teal text-white">
          <q-card-section>
            <component :is="getComponent(route.params.current)"></component>
          </q-card-section>
        </q-card>
      </section>
    </div>
  </q-page>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

const getComponent = (name) => import(`./Settings/${name}.vue`);

const links = [
  { label: "account", icon: "person" },
  { label: "gameBehavior", icon: "sports_esports" }
];

</script>

javascript vue.js vuejs3

Answer 1

Answer №1

If you want to create a watcher for the route, you can set up a callback function that assigns your dynamicComponent by passing any component name. In my scenario, I am monitoring route.name (although this is just a basic example).

The key here is to be patient and wait for the component to load since it involves an asynchronous import process. This way, accessing the component becomes straightforward.

When defining dynamicComponent, consider using shallowRef instead of ref. By using shallowRef, only the reference to the component will be reactive, not the component itself.

To delve deeper into DynamicComponents, check out this resource: here

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <!-- Utilize the dynamicComponent variable as a component -->
  <component :is="dynamicComponent"></component>
</template>

<script lang="ts" setup>
import { RouterLink } from 'vue-router'
import { shallowRef, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// When defining dynamicComponent, opt for shallowRef rather than ref.
// Using shallowRef guarantees that solely the reference to the component is made reactive, not the component itself.
const dynamicComponent = shallowRef<any>(null);

// Monitor changes in the route name within the router
// It's possible to monitor any property
watch(route, async () => {
  dynamicComponent.value = (await import(`./views/${route.name as string}View.vue`)).default;
});
</script>

Answer 2

If you want to create a watcher for the route, you can set up a callback function that assigns your dynamicComponent by passing any component name. In my scenario, I am monitoring route.name (although this is just a basic example).

The key here is to be patient and wait for the component to load since it involves an asynchronous import process. This way, accessing the component becomes straightforward.

When defining dynamicComponent, consider using shallowRef instead of ref. By using shallowRef, only the reference to the component will be reactive, not the component itself.

To delve deeper into DynamicComponents, check out this resource: here

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <!-- Utilize the dynamicComponent variable as a component -->
  <component :is="dynamicComponent"></component>
</template>

<script lang="ts" setup>
import { RouterLink } from 'vue-router'
import { shallowRef, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// When defining dynamicComponent, opt for shallowRef rather than ref.
// Using shallowRef guarantees that solely the reference to the component is made reactive, not the component itself.
const dynamicComponent = shallowRef<any>(null);

// Monitor changes in the route name within the router
// It's possible to monitor any property
watch(route, async () => {
  dynamicComponent.value = (await import(`./views/${route.name as string}View.vue`)).default;
});
</script>

Answer 3

Answer №2

<Component :is="loadComponent"></Component>
<script setup>
import {ref, defineAsyncComponent} from 'vue'
const componentName = ref(null)  // if you use it - define it
const loadComponent = computed(() => 
         defineAsyncComponent(() => import(`./Settings/${componentName.value}.vue`)
</script>

Answer 4

<Component :is="loadComponent"></Component>
<script setup>
import {ref, defineAsyncComponent} from 'vue'
const componentName = ref(null)  // if you use it - define it
const loadComponent = computed(() => 
         defineAsyncComponent(() => import(`./Settings/${componentName.value}.vue`)
</script>

"Experience the power of Vue.js 3.2 with Dynamic Component Knockout

Answer №1

Answer №2

Similar questions

JQuery and CSS can be used to create a div overlay without impacting the positions of other divs on the

The incorrect html encoding is being done by CKEditor

Preventing Event Propagation in JQuery Across Different Web Browsers

Utilizing Angular's $locationProvider.html5Mode in conjunction with $window parameters

Answer processing for the reminder dialog is underway

JavaScript Function to Redirect Page After a Delay of X Seconds

Guide to triggering a Vue.js function upon page loading using Vue 3.0 and Ant Design 2.1.2

Error encountered when attempting to create a new Vue project using Vue CLI (npm issue)

What is the process of incorporating a JavaScript node module into TypeScript?

What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

The Ajax call is failing to trigger the success function

Discrepancy in handling dummy data versus database data

Is it beneficial for performance to utilize JavaScript local variables intermittently?

The VueJS nested data structure

Utilize JSON text importing for template literals in Node.js

` Time Running Out: A Classy Countdown Timer`

trigger an event from a different event in Node.js

This error is thrown when trying to access the property 'message' of an undefined value

In Vue3, have you ever wondered why the $emit function seems to work fine before a promise fetch,

How can AngularJS handle multiple views sharing the same controller and ensure that the controller is executed only once?