VueJS tái biên dịch HTML trong một inline-mẫu thành phần

Question

Tôi đã bọc bootstrapTable (https://github.com/wenzhixin/bootstrap-table) vào một chỉ thị, như thế này:

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

Các JSON trở về từ máy chủ chứa một nút với một v-on chỉ thị vì vậy tôi phải biên dịch lại các hàng HTML được tiêm để có chỉ thị nút hoạt động đúng cách. Dù sao, có vẻ như đoạn mã sau không hoạt động:

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

Am tôi thiếu một cái gì đó rõ ràng?

Answer 1

Phương thức biên dịch $ cần phải được gọi trên các phần tử phải được biên dịch chứ không phải trên phần tử gốc vm.

tôi đã thay đổi dòng:

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

với:

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

và thêm thuộc tính "biên dịch lại" cho tất cả các yếu tố HTML mà cần phải được biên dịch lại.

Điều này dường như hoạt động như mong đợi, đừng ngần ngại trả lời nếu có cách thông thường hơn để thực hiện điều đó.