无法通过 setTimeout() 回调以编程方式显示 Bootstrap Vue 模式

Question

I'm building a Vue CLI app (Webpack template) that uses Bootstrap Vue to display modal windows. I am trying to programmatically display the modal (see Bootstrap Vue documentation for programmatically invoking the modal) from my Vue component's mounted() hook like so:

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

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

This works just fine. However, I am unable to get this to work if I introduce a setTimeout() function like this:

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

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

Why doesn't this display the modal after 3.5 seconds? The timeout works and I know that because I tried console.log() -ging a message from it. I figured it could be because the Vue JS instance isn't available inside the timer so I tried declaring a const self = this; and calling setTimeout(() => self.$refs.myModal.show(), 3500); but that didn't help either. What am I missing here?

Answer 1

Syntactically talking, is correct. When you use arrow functions, this is binded to the context from where it was originally called. In your case this inside the setTimeout means the Vue instances. Try to do several console.log calls like:

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

Just to check that your $ref exists. Maybe your myModal component is not binded yet?