VueJS एक इनलाइन-टेम्पलेट घटक

Question

मैं एक निर्देश में bootstrapTable (https://github.com/wenzhixin/bootstrap-table) लपेटा गया है, इस तरह में फिर से संकलन HTML:

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 सर्वर से एक वी-ऑन के साथ एक बटन शामिल निर्देश इसलिए मुझे बटन निर्देशों को सही तरीके से काम करने के लिए इंजेक्शन वाली HTML पंक्तियों को पुन: संकलित करना होगा। वैसे भी, ऐसा लगता है कि निम्नलिखित कोड काम नहीं कर रहा:

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

Am मैं कुछ स्पष्ट याद आ रही?

Answer 1

$ संकलन विधि को उन तत्वों पर बुलाया जाना चाहिए जिन्हें संकलित किया जाना चाहिए, vm रूट तत्व पर नहीं। साथ

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

:

मैं लाइन बदल

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

और सभी HTML तत्वों कंपाइल करने की आवश्यकता है के लिए गुण "recompile" जोड़ा गया।

ऐसा लगता है कि यह अपेक्षाकृत काम कर रहा है, ऐसा करने में संकोच न करें अगर ऐसा करने के लिए एक और पारंपरिक तरीका है।