Bootstrap-Vue usage when utilising render() and JSX

Question

I've trauled the docs for Bootstrap Vue, as well as asked this question on their github issue tracker a few days ago, with no luck.

I can't find anything in relation to using Vue's render() or JSX to generate bootstrap vue elements.

I'm having trouble even with the simplest scenario such as opening a modal on the click of a button.

const vue2 = new Vue({
    el: '#vue2',
    data: function() {
        return {
            show: false
        }
    },
    render() {
        return(
            <div>
                <b-btn v-b-modal="'myModal'">Show Modal</b-btn>
                <b-modal id="myModal">
                    Hello From My Modal!
                </b-modal>
            </div>
        )
    }
});

The elements are actually rendered in HTML:

But the 'click' event on the button doesn't work.

If I log the Vue instance in the console there is no reference to the instance of the modal in this.$refs, either.

Does bootstrap-vue support Vue's render() & JSX functionality? If so, how is this kind of thing achieved?

dalemac dalemac · Accepted Answer · 2018-03-31T20:10:56

So, I spent a fair bit of time looking into this. I could not get the above to work, It may be a bug in Bootstrap-Vue.

I ended up adding my own ref to the Vue object, and manually calling a function on click to show the modal.

Example below, for anyone else who comes across this.

const vue2 = new Vue({
    el: '#vue2',
    data: function() {
        return {
            modalShow: false
        }
    },
    methods: {
        showModal() {
            this.$refs.myModal.show()
        }
    },
    render() {
        return(
            <div>
                <b-btn on-click={this.showModal}>Show Modal</b-btn>
                <b-modal ref="myModal">
                    Hello From My Modal!
                </b-modal>
            </div>
        )
    }
});

Bootstrap-Vue usage when utilising render() and JSX

1 Answers