2

我正在构建一个使用 Bootstrap Vue 来显示模式窗口的 Vue CLI 应用程序（Webpack 模板）。我正在尝试从我的 Vue 组件的钩子中以编程方式显示模态（参见 Bootstrap 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 实例在计时器内不可用，所以我尝试声明 aconst self = this;并调用setTimeout(() => self.$refs.myModal.show(), 3500);，但这也无济于事。我在这里想念什么？

4

1 回答 1

1

从语法上讲，是正确的。当您使用箭头函数时，this将绑定到最初调用它的上下文。在您的情况下， setTimeout 内的this表示 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组件尚未绑定？

于 2018-08-16T12:23:23.537 回答