Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS re-compile HTML in an inline-template component

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

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?

like image 221
EveryWell Avatar asked Dec 04 '15 11:12

EveryWell


People also ask

How do I make reusable components Vue?

Each component you create in your Vue app should be registered so Vue knows where to locate its implementation when it is encountered in a template. To register your component in another component, you should add it to the components property in the Vue object.

Does Vue compile to HTML?

vue-template-loader compiles HTML into individual render functions in the respective TypeScript or JavaScript files.

What is $t in Vuejs?

Vuex is a state management pattern for vue. js. $t is the injected method from vue. js or Vue.

What is $V in Vuejs?

$v is an object that calls vuelidate (at the time of writing the comment, supported in version Vue. js 2.0), which is intended to check every input, which is made in a non-html form.


1 Answers

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

I changed the line:

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

with:

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

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.

like image 121
EveryWell Avatar answered Sep 24 '22 03:09

EveryWell