Модальный триггер из дочернего компонента

Question

В настоящий момент я работаю над приложением vue, структура которого аналогична этой:

<div class="characters"> <Character v-for="character in this.charactersToSearch" :key="character.id" :name="character.name" :character="character" @click="showMoreInfo" /> <div> <Modal v-if="showModal" />

Я надеялся, что смогу прикрепить событие щелчка мой <Character> компонент и показать модальный режим таким образом, но это, похоже, не работает. Итак, как мне запустить модальное окно изнутри дочернего компонента, если модальное окно находится в родительском компоненте?

Answer 1

Вы уже в пути, но пропустили пару шагов.

1)

Добавьте ссылку на свой модальный компонент, вы можете позвонить позже.

<Modal ref="myModal"/>

2)

Внутри вашего модального компонента вы должны добавить открытый метод, который его показывает. Обычно это делается путем изменения display: none

3)

Наконец, внутри вашего showMoreInfo метода вы вызываете свой open метод следующим образом:

this.$refs.myModal.open();