vue3 Вывод имени компонента в теге
 

Привет. РХочу передать имя компонента в тег. То есть.

import SiteForm from './SiteForm';
export default {
        components: {
            SiteForm
        },
 setup() {
const forms = {Site:'<'+SiteForm.name+'></'+SiteForm.name+'>'}
 return {forms}
}
}

Далее передаю его в другой шаблон и там

<template>
              <form v-for="(form,item) in forms" :key="item" >
                    <div v-html="form"></div>
              </form>
</template>

Но проблема в том, что v-html переводит строку в нижний регистр и на выходе я имею
<siteform></siteform>
Решить с регистром вроде никак нельзя. Но думаю можно предварительно form как то разделить и поставить тире между словами. Ведь до v-html в ней SiteForm
Как превратить SiteForm в Site-Form?

Для начала вопрос: нахрена?

Да уж и сам понял) Да и всё равно так <div v-html="form"></div> не работает. В браузере код есть <name></name>, но сам компонент не выводится.

Если тебе просто надо вывести произвольный vue компонент внутри vue-компонента, для этого существует

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

Т.е.

<script>
import SiteForm from './SiteForm';
import SiteForm2 from './SiteForm2';

const forms = [SiteForm, SiteForm2];

export default {
  setup() {
    return { forms }
  }
}
</script>

<template>
  <form v-for="(form, i) in forms" :key="i">
    <component :is="form"></component>
  </form>
</template>

Большое спасибо. То что надо).