В Nuxt 3 есть несколько способов реализации функционала подтверждения действий пользователя, не создавая отдельные формы для каждой сущности. Вы можете использовать компоненты и динамические свойства для передачи информации о типе действия. Вот пример подхода:
1. **Создайте компонент подтверждения**:
Вы можете создать общий компонент для подтверждения действий. Например, назовем его `ConfirmationModal.vue`.
```vue
<template>
<div v-if="isVisible" class="modal">
<div class="modal-content">
<p>{{ message }}</p>
<button @click="confirm">Да</button>
<button @click="cancel">Нет</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps(['message', 'isVisible'])
const emit = defineEmits(['onConfirm', 'onCancel'])
const confirm = () => {
emit('onConfirm')
}
const cancel = () => {
emit('onCancel')
}
</script>
<style>
.modal {
/* Стили для модального окна */
}
</style>
```
2. **Используйте этот компонент в вашей форме**:
В вашем основном компоненте, где располагается форма, можно использовать `ConfirmationModal`. Предположим, у вас есть форма для редактирования сущностей:
```vue
<template>
<div>
<form @submit.prevent="handleSubmit">
<!-- Поля формы здесь -->
<button @click="openConfirmation">Удалить</button>
</form>
<ConfirmationModal
v-if="isModalVisible"
:message="confirmationMessage"
:isVisible="isModalVisible"
@onConfirm="executeAction"
@onCancel="closeConfirmation"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ConfirmationModal from './ConfirmationModal.vue'
const isModalVisible = ref(false)
const confirmationMessage = ref('Вы уверены, что хотите выполнить это действие?')
const openConfirmation = () => {
isModalVisible.value = true
}
const closeConfirmation = () => {
isModalVisible.value = false
}
const executeAction = () => {
// Логика выполнения действия
console.log('Действие выполнено')
// Закрываем модал
closeConfirmation()
}
const handleSubmit = () => {
// Логика обработки данных формы
console.log('Данные формы отправлены')
}
</script>
```
3. **Передача информации о действии**:
В `handleSubmit` или в обработчике, который привязан к кнопке, вы можете задавать переменные, чтобы передать в `ConfirmationModal` нужное сообщение или тип действия. Например, можно передавать такие параметры, как тип сущности и само действие.
Таким образом, вы реализуете общий компонент, который можно будет переиспользовать для различных дублей и типов действий. Это позволяет избегать дублирования кода, а также упрощает поддержку и расширение функционала приложения.