How to make a button updating component dynamically in Vue?-CodePudding

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.

CodePudding user response：

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.