Блог

У меня есть <transition-group> приложение, которое раньше работало, но как только я начал использовать await при удаленном вызове в mounted() хук компонента, <transition-group> оно перестало работать. Что происходит, так это то, что рассматриваемые переходные элементы получают <transition-name>-enter-to класс, но он никогда не меняется. Опять же, это происходит только в том случае, если я await выполняю удаленный вызов в mounted перехватчике компонента.

Это работает:

 <transition-group name="file-list" appear>
  <li v-for="file in files" :key="file.id">
    <file :id="file.id"/>
  </li>
</transition-group>

...

export default {
  mounted() {
    this.remoteCallToGetFiles();
  }
}
 

Но когда я ожидаю удаленного вызова, <file> компонент получает file-list-enter-to класс, и он никогда не меняется, он просто застревает там:

 <transition-group name="file-list" appear>
  <li v-for="file in files" :key="file.id">
    <file :id="file.id"/>
  </li>
</transition-group>

...

export default {
  async mounted() {
    await this.remoteCallToGetFiles();
  }
}