Vue: сохранить то же сообщение, пока компонент полностью не скрыт

Question

У меня есть следующий компонент Vue.
При нажатии кнопки отображается my-popup, отображающее сообщение в зависимости от флага world.
Когда my-popup закрывается, он переключает флаг worldtrue / false.
Кроме того, при закрытии всплывающее окно my-popup исчезает и для полного исчезновения требуется 2 ~ 3 секунды.

Проблема в том, что сразу после запуска метода onOK () я вижусообщение о закрытии моего всплывающего окна также изменяется.
(например, если текущее сообщение hello world, оно меняется на hello universe при исчезновении)

Есть ли способ переключить world помечать и удерживать то же сообщение, пока не закроется всплывающее окно?

<template>
  <button @click="popupShown = true">hello</button>
  <my-popup :value="popupShown", title="HELLO" @ok="onOK()">hello {{world ? 'world' : 'universe'}}</mypopup>
</template>

<script>
export default {
  data () {
    return {
      popupShown: false,
      world: true
    }
  },
  methods: {
    onOK () {
      this.world = !world
      this.popupShown: false
    }
  }
}
</script>

Answer 1

(при условии, что вы используете Vue Transition в компоненте my-popup)

Что я заметил в переходе Vue, так это то, что при переходе для сокрытия чего-либо используется

• v-if : реактивные значения будут останавливать обновление
• v-show : реактивные значения будут продолжаться обновление

демо: https://codepen.io/jacobgoh101/pen/BxqGgB

Поэтому, если вы используете v-show в переходе в my-popup, просто измените его на v-if, чтобы решить вашу проблему.