VueJS ricompilare HTML in un componente inline-modello

Question

ho avvolto bootstrapTable (https://github.com/wenzhixin/bootstrap-table) in una direttiva, come questo:

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

Il JSON restituito dal server contiene un pulsante con un v-on direttiva quindi devo ricompilare le righe HTML iniettate per far funzionare correttamente le direttive dei pulsanti. In ogni caso, sembra che il seguente codice non funziona:

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

mi sto perdendo qualcosa di ovvio?

Answer 1

Il metodo $ compile deve essere richiamato sugli elementi che devono essere compilati, non sull'elemento radice vm.

ho cambiato la linea:

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

con:

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

e ha aggiunto l'attributo "ricompilazione" per tutti gli elementi HTML che devono essere ricompilati.

Questo sembra funzionare come previsto, non esitate a rispondere se c'è un modo più convenzionale per farlo.