VueJS bir satır içi şablon bileşeni böyle bir direktif içine (<a href="https://github.com/wenzhixin/bootstrap-table" rel="noreferrer">https://github.com/wenzhixin/bootstrap-table</a>) bootstrapTable sarılmış ettik

Question

, HTML-derleme yeniden: JSON sunucusundan döndürülen

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

bir v-on ile bir düğme içerir yönerge, bu yüzden, düğme yönergelerinin düzgün çalışmasını sağlamak için enjekte edilen HTML satırlarını yeniden derlemem gerekiyor.

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

mıyım belirgin bir şey eksik: Neyse, aşağıdaki kod çalışmadığını görünüyor?

Answer 1

$ derleme yönteminin, vm kök öğesinde değil, derlenmesi gereken öğeler üzerinde çağrılması gerekir. ile

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

:

çizgiyi değiştirdi

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

ve yeniden derlenmesi gereken tüm HTML öğelerine niteliği "yeniden derleme" ekledi. Bu beklendiği gibi çalışıyor gibi görünüyor, bunu yapmak için daha geleneksel bir yol olup olmadığını yanıtlamakta tereddüt etmeyin.