@itatelier

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

<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 нужный тип компонента динамически, по из текстового значения?
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы