Всем привет!
Не могу разобраться с такой задачей, есть CRUD приложение, где выводятся отделы, и в них сотрудники из этих отделов
Компоненты организовал так: App.vue главный компонент, в нем подключается компонент с выводом отделов Departaments.vue, и в компоненте вывода отделов подключается компонент с выводом сотрудников, DepartamentWorker.vue
У каждого отдела и сотрудника есть кнопка удаления, мне нужно сделать так, что бы при клике на нее, выходило модальное окно с вопросом, вы точно хотите удалить этот раздел/сотрудника?
То есть при клике допустим на отдел, передать этот элемент и id в компнент модального окна, там вывести информацию, и при клике на "Удалить" внутри модального окна, как то выполнить функцию в другом компоненте, и в нее передать id этого элемента, и там уже удалить
Вот такой у меня компонент с отделами:
<div v-else v-for="departament in departaments" :key="departament.id">
<div class="row departament align-items-center p-2 mt-3">
<input type="text"
class="form-control col-lg-6"
placeholder="Название отдела"
v-model="departament.departament_name"
@keyup.enter="departament.edit = false; editDepartament(departament)"
v-if="departament.edit"
v-focus
>
<div class="departament-head col-lg-6" v-else>
{{ departament.departament_name }}
</div>
<div class="departament-head_btn col-lg-6 text-right">
<button @click="departament.edit = true" type="button" class="btn btn-primary">
<i class="fa fa-pencil"></i>
</button>
<button @click="deleteDepartament(departament.id)" type="button" class="btn btn-danger">
<i class="fa fa-trash-o"></i>
</button>
</div>
<departament-worker
@render="renderComponentMethod"
v-if="renderComponent"
:departamentId="departament.id"
:renderComponent="renderComponent"
>
</departament-worker>
<div class="input-group mt-3">
<input @keyup.enter="saveWorker(departament.id)"
type="text"
class="form-control"
v-model="worker.worker_name[departament.id]"
:key="departament.id"
placeholder="Имя сотрудника"
>
<div class="input-group-append">
<button @click="saveWorker(departament.id)" class="btn btn-outline-secondary btn-primary text-light" type="button">Сохранить</button>
</div>
</div>
</div>
</div>
methods: {
deleteDepartament(id) {
axios.delete(`/api/departaments/${id}`)
.then(response => {
this.getDepartaments()
})
.catch(error =>{
console.log(error)
})
.finally(() => this.loading = false)
}
}
Как это можно сделать, и правильно ли построена структура компонентов?
