打开新标签后初始化 VueJs

Question

目前我使用 php 收集数据需要打印在一个 pdf 中并在新的浏览器选项卡中打开 pdf。问题是，一旦我有很多用户和大量文档要同时打印，它就会产生大量流量。所以我正在寻找一种方法来收集一个 html 中的所有内容，在新选项卡中打开它，从后端填充数据并在之后打印它。 我的问题是为新的浏览器选项卡初始化 VueJS。我在控制台中总是有以下警告： vue.js:1141 [Vue 警告]：找不到元素：#app

我猜原因是 VueJS 与 SPA 一起工作。有什么方法可以实现我的想法吗？

这是需要在新标签中打开新标签的模板。

<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>

在我的 JS 代码下面初始化 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();
     },
   });
 });
 }

这个独立的 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 }
        ]
      }
     });
    }
  }
 })();

更新：我在 RoyJ 评论后更正了我的代码，所以现在它可以正常工作了。只有一个注释...模板也应该从选择器更改为：

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

Answer 1

当您为 el 指定选择器时，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')
});