jquery에서 동적으로 추가된 html에 vuejs 구성 요소를 렌더링하는 방법

jquery에서 동적으로 추가된 html에 vuejs 구성 요소를 렌더링하는 방법

html에 jquery ajax 호출에서 반환되는 vuejs 컴포넌트가 있지만 컴포넌트를 렌더링하지 않습니다.vuej가 jquery에서 이 컴포넌트를 렌더링하려면 어떻게 해야 할까요?

jquery 코드 샘플:

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

데이터 내에 반환되는 내용도 확인할 수 있습니다.뷰는 다음과 같습니다.

<test-component></test-component>

데이터가 나오면요.뷰는 html div에 추가되며 컴포넌트를 렌더링하지 않습니다.

제가 올바르게 이해한 경우 AJAX 호출에서 커스텀컴포넌트의 태그를 취득하여 Vue 컴포넌트를 구축하려고 합니다.

그러니까 이게 네 거라고 칩시다.<test-component>:

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

앱 내 어딘가에서 AJAX에 전화를 걸면 다음과 같이 됩니다.

$(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));
})

컴포넌트 마운트 포인트:

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

.compile 상세:

https://vuejs.org/v2/api/ #Vue 컴파일

주의:Vue.compile()는 풀빌드에서만 사용할 수 있습니다.

여기서 작업 예를 찾을 수 있습니다.

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

이것이 도움이 되기를 바랍니다:)

언급URL : https://stackoverflow.com/questions/45549918/how-to-render-vuejs-components-in-dynamically-added-html-from-jquery