wie vuejs Komponenten in dynamisch hinzugefügtem HTML rendern von jquery

Question

Ich habe eine Vuejs-Komponente in einem HTML, die von jquery AJAX-Aufruf zurückgegeben wird, aber es die Komponente nicht gerendert. also, wie vuejs machen diese Komponente von jquery machen?

jquery Codebeispiel:

$.post(baseURL + "media", postData, function (data) { 
     if(data.status == true) { 
      $('#media_lib_app').html(data.view); 
     } 
}); 

und was im Inneren des data.view zurückgegeben wird, ist:

<test-component></test-component> 

aber wenn die data.view zum html div hinzugefügt wird, ist es nicht machen die Komponente.

Answer 1

Wenn ich richtig verstehe, erhalten Sie ein Tag einer benutzerdefinierten Komponente von Ihrem AJAX-Aufruf und möchten daraus eine Vue-Komponente erstellen.

Also lassen Sie uns sagen, dass dies Ihre <test-component>:

Vue.component('test-component', { 
    template: "<p>I am the test component template</p>", 
    methods: { 
     // Component logic... 
    } 
}); 

Jetzt irgendwo in Ihrer Anwendung, machen Sie die AJAX-Aufruf:

$(document).ready(function() { 
    var html = '<test-component></test-component>'; 
    var url = "https://jsonplaceholder.typicode.com/posts"; 

    $.get(url, function (data) { 

    var res = Vue.compile(html) 
    new Vue({ 
     render: res.render, 
     staticRenderFns: res.staticRenderFns 
    }).$mount('#media_lib_app') 

    }.bind(this)); 
}) 

Ihre Komponentenmontagepunkt:

<div id="media_lib_app"></div> 

Mehr über .comPile:

https://vuejs.org/v2/api/#Vue-compile

Hinweis: Vue.compile() ist nur in der Voll Build verfügbar.

Sie können hier ein funktionierendes Beispiel finden:

https://jsbin.com/motuvokeha/edit?html,js,output

Hope this Ihnen helfen können :)