@Soer44

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

Есть блок кнопок:
<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. В первом варианте, компоненты грузятся вместе страницей и скрыты до момента отображения.
  • Вопрос задан
  • 245 просмотров
Решения вопроса 1
@null_object
Нужно явно импортировать ваши компоненты, так
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...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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