How to make a button updating component dynamically in Vue?

Question

I'm sure this has been asked before but I cannot find it anywhere. I just need to dynamically load components on buttons in a loop. Can you call component files out of the script section. I have cards in a loop with a download button, but these files differ for every button click can I...

<template>
<v-row>
 <v-col v-for="(item, i) in archives">
  <v-btn>
   {{ item.component }}
  <v-btn/>
 <v-col />
<v-row/>

<template />

<script>
 data: () => ({
  archives: [
      {
        title: '',
        description: '',
        note: '',
        icon: '',
        color: '',
        component: 'ComponentName', <-- Here for instance call the component
      },
   }
})
<script />

Im hoping I am making myself clear. I just need the rendered button in a v-for to open the component name from the script tag. As I said there is multiple v-cards with the download button, but each button must open the component assigned to is in the script.

A dynamic component is probably what you're looking for here: vuejs.org/guide/essentials/… Also, not sure if it's needed but you may look for how to use dynamic imports (not sure if it's useful here but could be): stackoverflow.com/a/67825061/8816585 Even tho, getting the whole list of components ahead of time and just loading the correct one should be enough IMO (not sure if it impacts performance). — kissu
– kissu, Commented May 9, 2022 at 7:28
So i'm guessing its not possible to just read the component name from the script section? It feels like I am over complicating my question but it might just not be possible. — John'Sters
– John'Sters, Commented May 9, 2022 at 7:30
Not sure what you do mean by that. You have access to your archives in script. Otherwise, you can call some methods thanks to a button click and do some stuff there. — kissu
– kissu, Commented May 9, 2022 at 7:33
Sorry for the confusion, so when you call a component manually you have the <ComponentName /> everything works nice, but in my case it is a download button inside multiple v-cards in a v-for, so the only way to have this buttons open the specific components is with dynamic components, I cant just say <v-btn :to="item.comp" />Download<v-btn/> — John'Sters
– John'Sters, Commented May 9, 2022 at 7:40
Did you checked the first link I've linked to you? Because it's exactly that: a dynamic component. Where you can pass some state to the :is prop with something dynamic. — kissu
– kissu, Commented May 9, 2022 at 7:46

kissu · Accepted Answer · 2022-05-09 08:15:36Z

1

As shown here: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

You can use a dynamic component like this

<component :is="myCurrentlyDynamicComponent"></component>

myCurrentlyDynamicComponent being a name of a component, that you of course need to import initially.

answered May 9, 2022 at 8:15

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

2 Comments

John'Sters Over a year ago

The fact that nuxt makes everything so super easy is the reason why i tried to use the dynamic component without its imports which is really stupid I know. So nothing rendered even though I thought I was calling the component Name correctly in my scripts tag.

kissu Over a year ago

@John'Sters yeah even with the auto-import feature, some things still need to be explicit. There is maybe a hack somehow but I recommend keeping this one a bit explicit and more readable than usual.

Collectives™ on Stack Overflow

How to make a button updating component dynamically in Vue?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related