1

我已经阅读了 Bootstrap Vue 的文档，并在几天前在他们的 github 问题跟踪器上提出了这个问题，但没有运气。

我找不到与使用 Vue 的 render() 或 JSX 生成引导 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 呈现的： 图片

但是按钮上的“点击”事件不起作用。

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

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

4

1 回答 1

2

所以，我花了相当多的时间来研究这个。我无法使上述工作，这可能是 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>
        )
    }
});
于 2018-03-31T20:10:56.080 回答