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?
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.
vue-template-loader compiles HTML into individual render functions in the respective TypeScript or JavaScript files.
Vuex is a state management pattern for vue. js. $t is the injected method from vue. js or Vue.
$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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With