@sickgang

Как передать элемент при клике на него в другой компонент?

Всем привет!
Не могу разобраться с такой задачей, есть 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)
            }
}


Как это можно сделать, и правильно ли построена структура компонентов?
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Нужно вложить по компоненту модального окна в каждый компонент, выводящий раздел/сотрудника. Задача резко упростится.
Ответ написан
Ваш ответ на вопрос

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

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