Close bootstrap-vue modal with typescript

1
votes

I have a bootstrap-vue modal and try to close it in my click-function. 

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

but get the following error: 

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

I tried with jquery also

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

With error: 

Property 'modal' does not exist on type 'JQuery<HTMLElement>'
2
typescriptvue.jsbootstrap-vue
have you tried bootstrap-vue api ? bootstrap-vue.js.org/docs/components/modal/… – Ahmad Mobaraki
the first part is the exact copy from the link you sent. Seems that the typings aren't working, and I can't figure out how to make them work in typescript. – user373455
Bootstrap-Vue does not use jQuery, so the jQuery methods will not work. – Troy Morehouse

2 Answers

2
votes

With the latest version of BootstrapVue (2.0.0-rc.21 +), you can use the newer this.$bvModal.hide(id) method to close a modal with the specified id. $bvModal is typed, so it should work fine with Typescript.

1
votes

When refs are not working for me in Vue+Typescript, I sometimes cast the ref to an HTMLElement or disable type checking by using any.

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