Невозможно программно показать модальное Bootstrap Vue из обратного вызова setTimeout()

Question

Я создаю приложение Vue CLI (шаблон Webpack), которое использует Bootstrap Vue для отображения модальных окон. Я пытаюсь программно отобразить модальное (см. Документацию Bootstrap Vue для программного вызова модального) из моего компонента Vue mounted() крючок вот так:

<script>
export default {
  name: 'ButtonComponent',

  mounted() {
    const showModal = sessionStorage.getItem('showModal');
    if (showModal === 'yes') this.$refs.myModal.show();
  }
}
</script>

Это работает просто отлично. Тем не менее, я не могу заставить это работать, если я представлю setTimeout() функционировать так:

<script>
export default {
  name: 'ButtonComponent',

  mounted() {
    const showModal = sessionStorage.getItem('showModal');
    if (showModal === 'yes') setTimeout(() => this.$refs.myModal.show(), 3500);
  }
}
</script>

Почему это не показывает модальный режим через 3,5 секунды? Тайм-аут работает, и я знаю это, потому что я пытался console.log()составление сообщения от него. Я подумал, что это может быть потому, что экземпляр Vue JS не доступен внутри таймера, поэтому я попытался объявить const self = this; и звонит setTimeout(() => self.$refs.myModal.show(), 3500); но это тоже не помогло. Что мне здесь не хватает?

Answer 1

Синтаксически говоря, правильно. Когда вы используете функции со стрелками, они привязываются к контексту, из которого они изначально были вызваны. В вашем случае это внутри setTimeout означает экземпляры Vue. Попробуйте выполнить несколько вызовов console.log, например:

setTimeout(() => {
  console.log(this); // the vue instances
  console.log(this.$refs); // the $refs
  console.log(this.$refs.myModal); // the modal $ref
}, 3500)

Просто чтобы проверить, что ваш $ref существует. Может быть, ваш компонент myModal еще не связан?