1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
John'Sters
  • 185
  • 2
  • 14
  • 1
    A dynamic component is probably what you're looking for here: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components 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): https://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 May 09 '22 at 07: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 May 09 '22 at 07:30
  • 1
    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 May 09 '22 at 07:33
  • Sorry for the confusion, so when you call a component manually you have the 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 Download – John'Sters May 09 '22 at 07:40
  • I cant replace for instnace with something like < {{ item.component }} /> something like this? I already tried i know. xD – John'Sters May 09 '22 at 07:42
  • 1
    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 May 09 '22 at 07:46
  • I did, thank you kissu, just having trouble to grasp it fully, sorry im slow. Thank you for your patience, i will look into this into more detail. Nuxt makes things so easy I thought that there would be a simpler way to do this XD But I'm guessing if you know what you are doing this is the simple way. – John'Sters May 09 '22 at 07:51
  • I got it, sorry Kissu and thank you again. I just had to import the component first.. That's why it wasn't rendering.. sigh. – John'Sters May 09 '22 at 07:55

1 Answers1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    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. – John'Sters May 09 '22 at 08:21
  • 1
    @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. – kissu May 09 '22 at 08:23