VueJS 在内联模板组件中重新编译 HTML

Question

我已经将 bootstrapTable (https://github.com/wenzhixin/bootstrap-table) 包装到指令中，如下所示：

Vue.directive('bootstraptable', {
    priority: 1000,

    params: ['url', 'resource-name'],

    bind: function () {

        var _self = this;

        $(this.el)
            .bootstrapTable({
                pagination: true,
                pageSize: 15,
                pageList: [],
                sidePagination: 'server',
                url: this.params.url,
                queryParams: function (params) {
                    return params;
                },
                cookie: true,
                cookieExpire: '24h',
                cookieIdTable: this.params.resourceName + '-table',
                locale: 'it-IT'
            }).on('load-success.bs.table', function (e, data) {

                $('[data-toggle="tooltip"]').tooltip();
                _self.vm.$compile(_self.vm.$el);
            });
    },
    update: function (value) {
        $(this.el).val(value)
    },
    unbind: function () {
        $(this.el).off().bootstrapTable('destroy')
    }
});

从服务器返回的 JSON 包含一个带有 v-on 指令的按钮，因此我必须重新编译注入的 HTML 行以使按钮指令正常工作。无论如何，似乎以下代码不起作用：

_self.vm.$compile(_self.vm.$el);

我是不是遗漏了什么明显的东西？

Answer 1

需要在必须编译的元素上调用 $compile 方法，而不是在 vm 根元素上。

我改了行：

_self.vm.$compile(_self.vm.$el);

与：

            _.each($('[recompile]'), function(el){
                _self.vm.$compile(el);
            });

并将属性 "recompile" 添加到所有需要重新编译的 HTML 元素。

这似乎按预期工作，如果有更传统的方法可以做到这一点，请不要犹豫回答。

VueJS 在内联模板组件中重新编译 HTML

VueJS re-compile HTML in an inline-template component

javascript

vue.js

bootstrap-table