新しいタブを開いた後にVueJsを初期化する

Question

現在、私はデータを収集するためにPHPを使用していますが、1つのpdfに印刷し、新しいブラウザタブでpdfを開く必要があります。問題は、多くのユーザーと多数のドキュメントを同時に印刷するとすぐに多くのトラフィックを生成することです。だから私は1つの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ため

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

この別のモジュールVueJSを初期化するには：私は今、それが正しい動作しますが、RoyJコメントの後に私のコードを修正しました。一つだけノートが...テンプレートはまた、セレクタから変更する必要があります：あなたはelためのセレクタを指定すると

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

Answer 1

、Vueのはそれを現在のドキュメントになります。新しいタブは現在のドキュメントの一部ではありません。

Save a reference when you open the tab。 Write the HTML into its document。文書のうち、#appを照会し、代わりにあなたのVueの設定でセレクタの実際の要素を使用します。

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