Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Question

[Soer44]

Есть блок кнопок:

<div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddBookForm')">
					Добавить книгу
				</div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddTagsForm')">
					Добавить ТЕГ
				</div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddAuthorsForm')">
					Добавить Автора
				</div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddSeriesForm')">
					Добавить Серию
				</div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddFilesForm')">
					Добавить Файл
				</div>
				<div class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
				@click="toggleForm('AddFoldersForm')">
					Добавить Папку
				</div>
			</div>

Блок компонентов которые привязаны к кнопкам:

<div>
				<AddBookForm v-if="currentForm === 'AddBookForm'" @closeForm="closeForm" />
				<AddTagsForm v-if="currentForm === 'AddTagsForm'" @closeForm="closeForm" />
				<AddAuthorsForm v-if="currentForm === 'AddAuthorsForm'" @closeForm="closeForm" />
				<AddSeriesForm v-if="currentForm === 'AddSeriesForm'" @closeForm="closeForm" />
				<AddFilesForm v-if="currentForm === 'AddFilesForm'" @closeForm="closeForm" />
				<AddFoldersForm v-if="currentForm === 'AddFoldersForm'" @closeForm="closeForm" />
			</div>

Блок функций обработки:

const currentForm = ref(null);

function toggleForm(formName: any) {
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	currentForm.value = null;
}

Импорты все настроены правильно, в первой версии всё работает, но надо сократить код:

import AddBookForm from "@/components/forms/AddBookForm.vue";
import AddTagsForm from "@/components/forms/AddTagsForm.vue";
import AddAuthorsForm from "@/components/forms/AddAuthorsForm.vue";
import AddSeriesForm from "@/components/forms/AddSeriesForm.vue";
import AddFilesForm from "@/components/forms/AddFilesForm.vue";
import AddFoldersForm from "@/components/forms/AddFoldersForm.vue";

Как можно сократить код используя рендеринг динамических компонентов?
Пробовал способы:

<div v-for="button in buttons" :key="button.formName"
					class="mb-space-xl bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600 cursor-pointer text-center"
					@click="toggleForm(button.formName)">
					{{ button.label }}
				</div>

<div class="w-full">
				<component :is="currentForm" v-if="currentForm" @closeForm="closeForm" />
			</div>

const currentForm = ref(null);
function toggleForm(formName: any) {
	console.log(`toggleForm: Изменение текущей формы на ${formName}`);
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	console.log('closeForm: Закрытие формы');
	currentForm.value = null;
}


const buttons = [
	{ formName: 'AddBookForm', label: 'Добавить книгу' },
	{ formName: 'AddTagsForm', label: 'Добавить ТЕГ' },
	{ formName: 'AddAuthorsForm', label: 'Добавить Автора' },
	{ formName: 'AddSeriesForm', label: 'Добавить Серию' },
	{ formName: 'AddFilesForm', label: 'Добавить Файл' },
	{ formName: 'AddFoldersForm', label: 'Добавить Папку' },
];

Этот способ не работает. Компонент добавляется на страницу но не рендерится. ТО есть он появляется в DOMе но в виде <component></component> а не в виде готового html. В первом варианте, компоненты грузятся вместе страницей и скрыты до момента отображения.

Answer 1

[Андрей]

Нужно явно импортировать ваши компоненты, так

import {
  AddBookForm,
  AddTagsForm,
  AddAuthorsForm,
  AddSeriesForm,
  AddFilesForm
  AddFoldersForm,
} from '#components'

Либо использовать утилиту vue resolveComponent

const buttons = [
  { formName: resolveComponent('AddBookForm'), label: 'Добавить книгу' },
  { formName: resolveComponent('AddTagsForm'), label: 'Добавить ТЕГ' },
  { formName: resolveComponent('AddAuthorsForm'), label: 'Добавить Автора' },
  { formName: resolveComponent('AddSeriesForm'), label: 'Добавить Серию' },
  { formName: resolveComponent('AddFilesForm'), label: 'Добавить Файл' },
  { formName: resolveComponent('AddFoldersForm'), label: 'Добавить Папку' },
];

Из документации: https://nuxt.com/docs/guide/directory-structure/co...

Comments

[Soer44]

Компоненты импортированы. Я написал об этом, но не стал вставлять код, чтобы вопрос не был слишком длинный. Компоненты импортированы, изначальная версия моего кода рабочая, но её надо сократить.

[Soer44]

попробовал через resolveComponent, аналогичная ситуация, вариант не работает... Вопрос, почему компонент не рендерится в дом дереве? Он добавляется как тег компонента, но не перестраивается в код хтмл и на раскрывается.

[Андрей]

Soer44, Проверьте что вы передаете в :is="...", там должен быть объект компонента, либо строка, в случае рендеринга глобальных компонентов или стандартных html тегов.

[Soer44]

Андрей,
<component :is="currentForm" />

function toggleForm(formName: any) {
	console.log(`toggleForm: Изменение текущей формы на ${formName}`);
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	console.log('closeForm: Закрытие формы');
	currentForm.value = null;
}

[Андрей]

Soer44, у вас currentForm имеет тип string | null, а должен быть Component | null, то есть надо передавать в toggleForm импортированный компонент, а не строку

Посмотрите app.vue в демке: https://codesandbox.io/p/devbox/dynamic-components...

Логику toggleForm только нужно переделать, потому что теперь сравнение текущего компонента с переданным не будет работать правильно.

[Soer44]

Андрей, Это работает, но при условии

function toggleForm(formComponent: Component) {
  if (currentForm.value === formComponent) {
    closeForm();
  } else {
    currentForm.value = formComponent;
  }
}

50% задачи решено, а как быть с кнопками? чтобы не делать 9 отдельных кнопок, как то можно укоротить код кнопок?

[Андрей]

Soer44, вариантов декомпозиции на компоненты/хуки много, можно сделать и ваш вариант с массивом кнопок - https://codesandbox.io/p/devbox/dynamic-components...

[Soer44]

Андрей, Спасибо! Ваше решение работает. Вы красавчик.

[Soer44]

Андрей, ну если уж совсем доводить до идеала, то как реализовать идею с закрытием формы при повторном нажатии на эту же форму?

[Андрей]

Soer44, имеете ввиду повторном нажатии на кнопку?

[Soer44]

Андрей, да, чтобы работала функция

function toggleForm(formName: Component) {
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	console.log('closeForm: Закрытие формы');
	currentForm.value = null;
}

Дословно, при повторном нажатии на кнопку, компонент пропадает и остаётся пустое место. Как это раньше было реализовано. Это наверное вовсе не обязательно, просто интересно как можно реализовать подобную фичу.

[Андрей]

Soer44, поменяйте
const currentForm = ref<Component | null>(null);
на

const currentForm = shallowRef<Component | null>(null);

[Soer44]

Андрей, как с вами можно связаться вне площадки?

[Андрей]

Soer44, никак, наверное) А с какой целью?

[Soer44]

Всё работает как и планировалось.