Есть несколько компонентов, сначала есть один большой, который создает другие компоненты.
http://joxi.ru/DmBl36VFJwq4NA
Они, в свою очередь, содержат другие компоненты.
http://joxi.ru/82QZGyRfwj89wA
На странице есть различные интерактивные элементы, которые открывают всплывающее окно с выбором.Всплывающее окно является еще одним компонентом VUE.Всплывающее окно принимает данные и отображает их в виде выбора.Затем пользователь выбирает что-то в этом выборе и нажимает кнопку подтверждения.
Мне нужно связать результат всплывающего окна с конкретным элементом в компоненте.Проблема в том, что пользователь может открыть всплывающее окно всех трех компонентов.Клики по всем этим элементам открывают всплывающее окно
http://joxi.ru/52a53oGUE4lke2
, но все эти элементы находятся в разных компонентах
Существует код основного компонента, который содержит всплывающее окнокомпонент
<template>
<!--some html-->
<select-modal @close-modal="hideSelectModal" v-if="selectModal" :data="selectModalData"></select-modal>
<!--some html-->
</template>
<script>
data: () => ({
selectModal: false,
selectModalData: {},
}),
methods: {
showSelectModal(data, event){
if(this.selectModal === true){
this.hideSelectModal();
}else{
this.selectModalData = data;
this.selectModal = true;
}
},
hideSelectModal(){
this.selectModalData = [];
this.selectModal = false;
},
}
}
</script>
Есть код того, как я передаю данные от дочерних компонентов родительскому элементу
methods: {
showModal(dataArr, selectedItem, action, event){
let selectObject = {items: [], selected: selectedItem, action: action};
for(let i = 0; i < dataArr.length; i++){
selectObject.items.push({value: dataArr[i].id, text: dataArr[i].name})
}
this.$emit('open-modal', selectObject, event);
}
},
есть метод обновления внутри всплывающего компонента
update(){
if(this.value === null){
return false;
}
switch(this.data.action){
case 'serie':
this.updateGameSerie();
break;
case 'game':
this.updateGame();
break;
case 'set':
this.updateSet();
break;
}
},
Но я думаю, что проходить действие как строку не очень хорошая идея.Мб есть какая-то трассировка стека?
Есть две проблемы.
1 - как всплывающее окно может узнать, из какого компонента были переданы данные?
2 -Как связать результат выбора всплывающего окна с данными дочерних компонентов, чтобы переопределить их?