Bootstrap-使用 render() 和 JSX 时的 Vue 用法

Question

我查看了 Bootstrap Vue 的文档，并在几天前在他们的 github 问题跟踪器上提出了这个问题，但没有成功。

我找不到任何与使用 Vue 的 render() 或 JSX 生成 bootstrap vue 元素有关的内容。

即使是最简单的情况，例如单击按钮打开模式，我也遇到了问题。

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>
        )
    }
});

元素实际上在 HTML 中呈现：

但是按钮上的 'click' 事件不起作用。

如果我在控制台中记录 Vue 实例，则在 this.$refs 中也没有对模态实例的引用。

bootstrap-vue 是否支持 Vue 的 render() 和 JSX 功能？如果是这样，这种事情是如何实现的？

Answer 1

所以，我花了相当多的时间来研究这个。我无法使上述工作正常，这可能是 Bootstrap-Vue.

中的错误

我最终将自己的 ref 添加到 Vue 对象，并在单击时手动调用函数以显示模态。

以下示例，适用于遇到此问题的任何其他人。

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-使用 render() 和 JSX 时的 Vue 用法

Bootstrap-Vue usage when utilising render() and JSX

vue.js

jsx

bootstrap-vue