VueJS 在内联模板组件中重新编译 HTML [英] VueJS re-compile HTML in an inline-template component

问题描述

我已经包装了 bootstrapTable (https://github.com/wenzhixin/bootstrap-table) 变成一个指令，像这样:

I've wrapped bootstrapTable (https://github.com/wenzhixin/bootstrap-table) into a directive, like this:

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 行以使按钮指令正常工作.无论如何，似乎以下代码不起作用:

The JSON returned from the server contains a button with a v-on directive so I have to recompile the injected HTML rows to have the button directives properly working. Anyway, it seems that the following code isn't working:

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

我是否遗漏了一些明显的东西?

Am I missing something obvious?

推荐答案

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

The $compile method needs to be called on the elements that have to be compiled, not on the vm root element.

我改变了行:

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

与:

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

并为所有需要重新编译的HTML元素添加属性recompile".

and added the attribute "recompile" to all the HTML elements that need to be recompiled.

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

This seems to be working as expected, do not hesitate to answer if there is a more conventional way to do that.

这篇关于VueJS 在内联模板组件中重新编译 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！