Хук перехода создает проблему, однажды уничтоженную и отозванную

Question

У меня есть родительский и дочерний компоненты, в дочернем компоненте у меня есть <transition>, определенный следующим образом:

<template lang="pug">
  div
    transition(name="fade-transition" mode="out-in" v-on:after-enter="fnAfterEnter")
      h1(v-if"someCondition") lorem ipsum
</template>

<script>
  export default {
    methods: {
      fnAfterEnter () {
        do something here...
      }
    }
  }
</script>

Проблема в том, что в родительском компоненте у меня есть некоторые функции, которые монтируют и уничтожаютдочерний компонент с простым v-if условием.Все будет работать отлично, когда монтируется дочерний компонент в первый раз, но после уничтожения и повторного монтирования <transition> все хуки (не только v-on:after-enter) не вызывают методы fnAfterEnter.

Заранее спасибо:)

Answer 1

Я обнаружил, что проблема заключалась в том, что переход дочернего компонента не был завершен, и я выполнял некоторую функцию в родительском компоненте, чтобы сделать условие элемента перехода дочернего компонента true без использования $nextTick, но теперь мне понравилось как приведенный ниже код и проблема исправлена.

<script>
  export default {
    methods: {
      someFnInParent () {
        this.$nextTick(() => {
          this.$refs.childComp.someCondition = true
        })
      }
    }
  }
</script>

Итак, this.$nextTick(() => {}) помог мне:)