javascript — как визуализировать компоненты vuejs в динамически добавленном HTML из jquery

Как визуализировать vuejs компонентов в динамически добавляемом HTML из JQuery

Если я правильно понимаю, вы получаете тег пользовательского компонента из вашего вызова AJAX и хотите создать из него компонент Vue.

Допустим, это ваш {amp}lt;test-component{amp}gt; :

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

Теперь где-то в вашем приложении вы делаете AJAX-вызов:

 $(document).ready(function() { var html = '{amp}lt;test-component{amp}gt;{amp}lt;/test-component{amp}gt;'; 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)); }) 

Точка крепления вашего компонента:

 {amp}lt;div id="media_lib_app"{amp}gt;{amp}lt;/div{amp}gt; 

Подробнее о .compile:

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

Примечание: Vue.compile() доступен только в полной сборке.

Вы можете найти здесь рабочий пример:

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

Надеюсь, это поможет вам :)

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector