Предотвратить оба «модальных» открытия одновременно

Question

Я начал изучать VueJS в прошлые выходные, и иногда простые вещи могут быть сложными ... Я уверен, что это просто, но я, что Vue, позволил это легко.

У меня есть две кнопки, которые открывали модал при нажатии, например:

<el-button class="addOptionBtn" @click="showAddOption = !showAddOption;" :class="{active: showAddOption}">
<el-button class="addGroupBtn" @click="showAddGroup = !showAddGroup;" :class="{active: showAddGroup}">

Мне нужно закрыть открытый модал, когда пользователь нажимает на другую.Как выключатель.

Я пытался создать метод who! = Значение showAddOption и showAddOption, но они не обновляются реактивно в данных vue. Где я ошибаюсь?

Answer 1

Когда я имею дело с модалами, я обычно гарантирую, что есть только один.

Один из способов сделать это - использовать одну переменную для отслеживания того, какой модальный режим открыт

, т. Е. В данных Vue

{
  openModal: null,
  // enums, you can use numbers or string or not enumarate at all
  modalEnum: { MODAL_ADD_OPTION: 'option', MODAL_ADD_GROUP: 'group' }
  // ... other data items
}

в шаблоне: (такжедобавлено close, чтобы показать, как закрыть модал)

<el-button class="addOptionBtn" @click="openModal = modalEnum.MODAL_ADD_OPTION;" :class="{active: openModal === modalEnum.MODAL_ADD_OPTION}">Option</el-button>
<el-button class="addGroupBtn" @click="openModal = modalEnum.MODAL_ADD_GROUP;" :class="{active: openModal === modalEnum.MODAL_ADD_GROUP}">Group</el-button>

<el-button class="addGroupBtn" @click="openModal = null;" >Close</el-button>

тогда ваш модал будет ...

<my-option-modal v-if="openModal === modalEnum.MODAL_ADD_OPTION">...</my-option-modal>
<my-group-modal v-if="openModal === modalEnum.MODAL_ADD_GROUP">...</my-group-modal>

Это немного упрощенная версия реализации, но основы естьи вы можете расширить их по мере необходимости.