Почему не срабатывает пользовательское событие Vue в блоке then?

Question

[kkomissarov]

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

onAddWordSubmit(){
      this.$emit('change-state', 'loading');

      this.axios.post('http://127.0.0.1:8000/api/v1.0/word/create/', {
        'word': this.word,
        'translate': this.translate,
        'context': this.context
      })
      .then(()=>{
        this.$emit('change-state', 'wordarea');
      });

Проблема в том, что в блоке then событие не срабатывает. this - это компонент vue, т.е. с контекстом все ок. Если вытащить эту строчку из функции, то она срабатывает нормально (но асинхронно, не дожидаясь ответа). В чем тут может быть дело?

Для полной картины вот ссылка на гитхаб: https://github.com/kkomissarov/anki
Эта проблема в блоке src/components/AddWordComponent.vue

Comments

[Кирилл Романов]

А запрос успешно завершается?

[kkomissarov]

Кирилл Романов, да, 201 ответ. Если сделать вот так, то ответ печатается:

.then((response)=>{
        console.log(response);
        this.$emit('change-state', 'wordarea');
      });

[kkomissarov]

Кирилл Романов, ну и если на всякий случай сделать так, то тоже ничего не происходит

.then(()=>{
        this.$emit('change-state', 'wordarea');
      })
.catch(()=>{
        this.$emit('change-state', 'wordarea');
      })

Answer 1

[Roman Alekseiev]

Вы используете динамический компонент, изначально у Вас рендерится wordarea, по отправке запроса вы переключаете динамический компонент на другой, в этот момент ваш компонент wordarea уничтожается и на его месте создается компонент loading, и соответственно после уничтожения wordarea отвязываются все подписаные события и по факту вы пытаетесь получить событие 'change-state' уже у компонента loading

Вы можете попробовать обернуть в keep-alive и компоненты при переключении удаляться не будут

<keep-alive>
<component
  v-bind:is="currentComponent"
  v-on:change-state="changeState($event)">
</component>
<keep-alive>

Comments

[kkomissarov]

Это работает, спасибо. Но я не понял вот чего - я точно так же меняю компоненты и в других местах. Например при нажатии кнопки add word компонент меняется с wordarea на adding. Но потом я нажимаю кнопку close и он снова меняется на wordarea. Или, например, если вытащить ту же самую строчку из вопроса за пределы then, она начинает работать. Почему это так, подскажите, пожалуйста, если не сложно.

[kkomissarov]

Roman Alekseiev Я долго думал и до меня дошло) В this записывается компонент, который в ходе выполнения функции исчезает, а $emit вызывается именно в нем. А его нет. Во всех остальных случаях $emit вызывается в текущем компоненте. Спасибо еще раз, это было непросто для понимания)