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-на поэтому мне нужно перекомпилировать введенные строки HTML, чтобы корректно работали директивы кнопок. Во всяком случае, кажется, что следующий код не работает:

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

я упускаю что-то очевидное?

Answer 1

Метод компиляции $ необходимо вызывать на элементы, которые необходимо скомпилировать, а не на элемент vm root.

Я изменил строку:

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

с:

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

и добавил атрибут "перекомпиляции" для всех HTML-элементов, которые необходимо перекомпилировать.

Это похоже на работу, как ожидается, не стесняйтесь ответить, если есть более обычный способ сделать это.