Как получить значение внутри функции при нажатии кнопки?

Question

[kot98]

Есть табы и попап

<el-tabs v-model="activeTab" :before-leave="changeTab">
        <el-tab-pane label="1 вкладка" name="first">
          ...
        </el-tab-pane>
        <el-tab-pane label="2 вкладка" name="second">
          ...
        </el-tab-pane>
....
<el-tabs>
<el-dialog v-model="isDialogShown">
...
      <el-button @click="discardChanges"> Отменить </el-button>
      <el-button @click="saveChanges"> Подтвердить </el-button>
...
  </el-dialog>

before-leave принимает функцию, которая при возврате true переходит к другому табу, при false - не переходит. При изменении данных в одной вкладке и переходе к новой вкладке, появляется попап с кнопками сохранить или отклонить. В методе changeTab проходит проверка, изменились ли данные на текущей вкладке при переходе к новой и открытие попапа. Как в методе changeTab вернуть true только после нажатия на кнопки Отменить и Подтвердить?

Answer 1

[Aetae]

Если changeTab не может примать async функцию(функцию возвращающую Promise) то никак. Ожидание действия пользователя - асинхронная операция. Тебе надо изменить логику поведения.

Иначе: система диалогов должна быть в любом случае вынесена в отдельный компонент, а в идеале вообще во внутренние вызовы, типа:

const result = await modal({
  title: ...,
  type: 'confirm',
  acceptText: 'Подтвердить',
  ...
})

Но если что-то колхозить, то условно так:

showPopup() {
  this.isDialogShown = true;
  this.pending = new Promise((resolve) => {
    this.discardChanges = () => resolve(false);
    this.saveChanges = () => resolve(true);
  });
},
async changeTab() {
  ...
  return await this.pending;
}

Ну или прямо так:

changeTab() {
  return new Promise((resolve) => {
    this.discardChanges = () => resolve(false);
    this.saveChanges = () => resolve(true);
  });
}

Но я бы так делать не стал, а таки вынес нормально всё, ибо один компонент должен выполнять ровно одну функцию и его логика не должна просачиваться в иные.

Comments

[kot98]

Aetae, она может принимать асинхронную функцию

[Aetae]

kot98, дополнил.

[kot98]

Aetae, получилось, что-то вроде такого

const pending = ref()
...
const changeTab = async (activeName: TabName, oldActiveNameb: TabName) => {
    if (!firstTab.value.isDataChanged()) {
      changeDialogVisible()

      return await pending.value
    }
...
    handleActiveTab()
  }

const handleActiveTab = () => {
  previousTab.value = activeTab.value
}

let discardChanges = () => {
  firstTab.value.setPreviousData()
...
  changeDialogVisible()
}

const changeDialogVisible = () => {
  isDialogShown.value = !isDialogShown.value

  pending.value = new Promise((resolve) => {
    discardChanges = () => resolve(false)

    saveChanges = () => resolve(true)
  })
}

[Aetae]

kot98, ну ты в вопросе использовал слово "методы", потому я писал для options api. А так - типа того, но вроде pending может быть просто переменной, не рефом.