Question

我上周末开始学习VueJS，有时候，简单的事情可能很复杂。.我敢肯定，这很简单，但是vue让这变得容易。

我有两个按钮，可在点击时打开模式，如下所示：

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

当用户单击其他时，我需要关闭打开的模式。像开关一样。

我试图创建一个方法，该方法的！= 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
}

在模板中：（还添加了关闭以显示如何关闭模式）

<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>

这是该实现的稍微简化的版本，但是基础知识已经存在，您可以根据需要对其进行扩展。

防止同时打开两个“模态”

1 个答案: