Vue3 Как указать ссылку на компонент по текстовому значению его имени?

Question

[Nikita Bel]

<template>
<tr>
  <th
      v-for="col in table_headers"
  >
    <a href="" :data-filter_name='[[col.name]]' :data-widget_type='[[ col.widget_type ]]' @click.prevent="showWidget">[[ col.label ]]</a>
    <component
      :is="WidgetType"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>
  </th>
</tr>
</template>

<script setup>
    import TextWidget from "@/components/Widgets/TextWidget.vue";

    import { ref, onMounted } from 'vue'

    const WidgetType = ref("TextWidget")

    const table_headers = ref([
        {name: "family_name", label: "Фамилия", widget_type: 'TextWidget'},
        {name: "given_name", label: "Имя", widget_type: 'TextWidget'},
        {name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget'},
    ])
</script>

В этот компоненте в параметре :is указана ссылка на TextWidget и все работает, но эта ссылка на сам объект компонента, а если вместо него подставить текстовое значение, например из текущего элемента v-for ( [[ col.widget_type]] ), или из ref WidgetType, то не работает..

<component
      :is="WidgetType"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>

<component
      :is="[[col.widget_type]]"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>

Как можно передать в :is нужный тип компонента динамически, по из текстового значения?

Answer 1

[MaxRyazan]

А зачем текстовое значение?

<component :is="currentComponent" />
<button @click="currentComponent = ComponentTwo">Switch to component2</button
<button @click="currentComponent = ComponentThree">Switch to component3</button

import ComponentOne from '...'
import ComponentTwo from '...'
import ComponentThree from '...'

const currentComponent = shallowRef(ComponentOne)

Ты можешь в своём массиве каждому элементу добавить поле component и присвоить ему нужный компонент, а в цикле потом подставлять уже не текстовое значение, а именно компонент.

const table_headers = ref([
        {name: "family_name", label: "Фамилия", widget_type: 'TextWidget', component: ComponentOne},
        {name: "given_name", label: "Имя", widget_type: 'TextWidget', component: ComponentTwo},
        {name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget', component: ComponentThree},
    ])

<component
      :is="col.component"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>

Comments

[Nikita Bel]

А зачем текстовое значение?

Сейчас массив table_headers задекларирован в коде компонента, а на след. этапе будет получен из Ajax, и виды компонентов придут в текстовом виде.

Получилось реализовать через дополнительный биндинг текстового наименование и ссылки на объект, спасибо за идею.:

<template>
<tr>
  <th
      v-for="col in table_headers"
  >
    <a href="" :data-filter_name='[[col.name]]' :data-widget_type='[[ col.widget_type ]]' @click.prevent="showWidget">[[ col.label ]]</a>
    <component
      :is="loadedComponents[col.widget_type]"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>
  </th>
</tr>
</template>

<script setup>
    import TextWidget from "@/components/Widgets/TextWidget.vue";

    import { ref, shallowRef, onMounted } from 'vue'

    const loadedComponents = shallowRef({
        TextWidget: TextWidget
    })

    onMounted(() => {
      console.log(`Loaded comp: ${loadedComponents.value['TextWidget']}`)

    })

    const table_headers = ref([
        {name: "family_name", label: "Фамилия", widget_type: 'TextWidget'},
        {name: "given_name", label: "Имя", widget_type: 'TextWidget'},
        {name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget'},
    ])
</script>

[MaxRyazan]

enum MyComponents {
   one = "ComponentOne",
   two = "ComponentTwo",
   three = "ComponentThree",
}

const currentComponent = shallowRef()

onMounted(async () => {
 const component =  await axios.get()
 switch (component) {
  case MyComponents.one:  currentComponent .value = ComponentOne,
break
  case MyComponents.two:  currentComponent .value = ComponentTwo
break
  case MyComponents.three:  currentComponent .value = ComponentThree
break
}
})