Пусть $ emit () выполняется синхронно после функции в Vue

Question

Я пытаюсь установить для логической переменной значение false, чтобы закрыть меню перед открытием диалога в Vue 2.

public saveScreens() {
    this.showThreeDotMenu = false
    this.$emit('save-screens')
}

Я хочу выполнить эти две строки синхронно, однако я не могу найти, что $ emit произойдет до того, как будет выполнено присваивание.

Я попытался экстраполировать оператор присваивания в его собственную функцию, установив асинхронность, а затем в saveScreens (), нажав эту функцию, затем .then (() => this. $ Emit ('save-Screens')), однако это все еще не работает.

Независимо от того, что я пробовал, открывается окно электронного сообщения, а затем, после его закрытия, логическое значение устанавливается в значение false, а затем открываемое меню закрывается.

Есть ли способ, с помощью которого я могу подождать, пока условный HTML, который я использую, используя v-if, будет скрыт, а затем выполнить функцию после этого?

Использование Electron 1.8.8 и Vue 2.x +

Answer 1

Единственное простое решение, которое я нашел, - это использование setTimeout для задержки отображения диалогового окна (как отмечено в комментариях, nextTick не решило проблему). Я сделал демонстрационный фрагмент, где вы можете изменить интервал ожидания. Где-то около 10 мсек работает в моем браузере. Я бы порекомендовал использовать что-то вроде 50, чтобы быть везде в безопасности.

Я бы использовал v-show вместо v-if для чего-то, что будет скрыто и отображено снова.

new Vue({
  el: '#app',
  data: {
    showMenu: true,
    delay: 10
  },
  methods: {
    showDialog() {
      this.showMenu = false;
      setTimeout(() => {
        alert('this is a dialog');
        this.showMenu = true;
      }, this.delay);
    }
  },
  components: {
    threeDotMenu: {
      template: '#three-dot-menu-template',
      props: ['show'],
      methods: {
        openDialog() {
          this.$emit('save-screens');
        }
      }
    }
  }
});

.menu {
  background-color: #fee;
  padding: 2em;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <label>Delay: <input type="number" v-model="delay"></label>
  <three-dot-menu :show="showMenu" @save-screens="showDialog"></three-dot-menu>
</div>

<template id="three-dot-menu-template">
  <div class="menu" v-show="show">
    this is the menu
    <button @click="openDialog">Open dialog</button>
  </div>
</template>