새 탭을 열면 VueJs를 초기화하십시오.

Question

현재 PHP를 사용하여 데이터를 수집하고 하나의 PDF로 인쇄하고 새 브라우저 탭에서 pdf를 열어야합니다. 문제는 많은 사용자와 많은 문서를 동시에 인쇄 할 때 트래픽이 많이 발생한다는 것입니다. 그래서 한 가지 HTML로 모든 것을 수집하고 새 탭에서 열고 백엔드의 데이터로 채우고 인쇄하는 방법을 찾고 있습니다. 제 문제는 새 브라우저 탭에 대해 VueJS를 초기화하는 것입니다. 항상 콘솔에서 다음과 같은 경고가 나타납니다. vue.js : 1141 [Vue 경고] : 요소를 찾을 수 없습니다. #app

VueJS가 SPA에서 작동한다는 이유가있을 것입니다. 내 아이디어를 구현할 방법이 있습니까?

새 탭에 대한 템플릿은 새 탭에서 열어야합니다. 내 JS 코드 아래

<div id="app"> 
<printing-form v-for="printedForm in printedForms" track-by="id" :printed-form="printedForm"></printing-form> 
</div> 

<template id="printingForm-template"> 
    Some HTML need to be printed in new tab. 
</template> 

는 VueJs

var VuePrinting = (function() { 
    return { 
    vueInit: function() { 
    Vue.component('printingForm', { 
    temlate: newWindow.document.getElementById('printingForm-template') 
    }); 

    var vm = new Vue({ 
    el: newWindow.document.getElementById('app'), 
    data: { 
     printedForms: [ 
     { obj1 }, 
     { obj3 }, 
     { obj3 } 
     ] 
     } 
    }); 
    } 
    } 
})(); 

UPDATE에 대한 VueJS에게

var printButton = $('#print-button'); 
    printButton.on('click', function(e) { 
    e.preventDefault(); 
    printButton.unbind('click'); 
    printButton.css('color', '#008000'); 
    var idNumbers = TopPanel.getArrayOfId(); 
    if (idNumbers == '') { 
     idNumbers = TopPanel.getIdNumber(); 
    } 
    var url = window.location.href + '/form'; 

    $.ajax({ 
    url: url, 
    data: 'id=[' + idNumbers + ']', 
    success: function(data) { 
     var newWindow = window.open(url); //Open URL in new tab 
     var printedIds = $.parseJSON('[' + idNumbers + ']'); 
     printedIds.forEach(function(item, i, arr) { 
     var printedField = $('#top-row-'+item).find('.table-field-printed'); 
     if (!printedField.hasClass('true-value')) { 
      printedField.addClass('fa'); 
      printedField.addClass('fa-check'); 
      printedField.addClass('true-value'); 
     } 
     }); 
     printButton.css('color', '#4f5762'); 
     printButtonInit(); 
     newWindow.onload = function() { 
     VuePrinting.vueInit(newWindow); //Here I initialize VueJS module 
     } 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
     alert($.parseJSON(xhr.responseText)); 
     printButton.css('color', '#4f5762'); 
     printButtonInit(); 
    }, 
    }); 
}); 
} 

이 별도의 모듈을 초기화하기 위해서 : 나는 RoyJ 주석 후 내 코드를 수정, 그래서 지금은 올바른 작동 . 하나의 참고가 ... 템플릿도에 선택에서 변경해야합니다 : 당신이 당신의 el에 대한 선택을 지정하는 경우

newWindow.document.getElementById('printingForm-template') 

Answer 1

, 뷰는 현재 문서에서 찾을 것입니다. 새 탭은 현재 문서의 일부가 아닙니다.

Save a reference when you open the tab. Write the HTML into its document. 당신은 body 태그에 마운트 할 수,

var vm = new Vue({ 
    el: newWindow.document.getElementById('app') 
});