@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 только после нажатия на кнопки Отменить и Подтвердить?
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
Если 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);
  });
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
14 июн. 2024, в 16:07
5000 руб./за проект
14 июн. 2024, в 15:57
3000 руб./за проект
14 июн. 2024, в 15:50
10000 руб./за проект