使用打字稿关闭 bootstrap-vue 模态答案

【问题标题】：Close bootstrap-vue modal with typescript使用打字稿关闭 bootstrap-vue 模态
【发布时间】：2019-10-27 20:57:32
【问题描述】：

我有一个 bootstrap-vue 模式，并尝试在我的点击功能中关闭它。

this.$refs['my-modal'].hide()

但得到以下错误：

Property 'hide' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'hide' does not exist on type 'Vue'

我也试过 jquery

$('#my-modal').modal('hide');

有错误：

Property 'modal' does not exist on type 'JQuery<HTMLElement>'

【问题讨论】：

【解决方案1】：

使用最新版本的 BootstrapVue (2.0.0-rc.21 +)，您可以使用较新的this.$bvModal.hide(id) 方法关闭具有指定id 的模态。 $bvModal 是输入的，所以它应该可以在 Typescript 上正常工作。

【讨论】：

【解决方案2】：

当refs 在Vue+Typescript 中对我不起作用时，我有时会将ref 转换为HTMLElement 或使用any 禁用类型检查。

(this.$refs['my-modal'] as HTMLElement).hide()
(this.$refs['my-modal'] as any).hide()

【讨论】：

不起作用，因为我猜 Jquery 不是 Troy 提到的 bootstrap-vue 的选项。不过，我可能会在其他地方使用它，所以谢谢。
typescript cast 也可以工作。因为增加Vue.prototype.$refs 类型是困难/不明智的，因为它会使.hide() 在任何参考上显示为有效。