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

Question

我有一个 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>'

Answer 1

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

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

Answer 2

使用最新版本的 BootstrapVue (2.0.0-rc.21 +)，您可以使用更新的 this.$bvModal.hide(id) 方法关闭具有指定 id 的模态框。 $bvModal 是键入的，因此它应该可以与 Typescript 一起正常工作。

Close bootstrap-vue modal with typescript