Question

我的JS小提琴在这里：

<div id="app">
  <h1>
    This should not print.
  </h1>
  <div id="pickList">
    <h2>Todos:</h2>
    <ol>
      <li v-for="todo in todos">
        <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">
        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
        <input v-model="todo.notes" />
      </label>
      </li>
    </ol>
  </div>
  <button @click="print">print</button>
</div>


new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false, notes: 'What is JavaScript' },
      { text: "Learn Vue", done: false, notes: 'Doing' },
      { text: "Play around in JSFiddle", done: true, notes: 'Done' },
      { text: "Build something awesome", done: true, notes: '' }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
print() {
      var printWindow = window.open('', '', 'height=600,width=800');
      printWindow.document.write('<html><head><title>Print This</title>');
      printWindow.document.title = 'printthis.pdf';
      printWindow.document.write('</head><body >');
      printWindow.document.write('<div class="container">');
      var pageElement = this.$el.querySelector('#pickList');
      var html = pageElement.outerHTML;
      printWindow.document.write(html);
      printWindow.document.write('<br />');
      printWindow.document.write('<br />');
      printWindow.document.write('</div>');
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    }
}
})

我希望的行为是：

当按下打印按钮时，输入元素的模型值也将出现在选择列表中。

这感觉像是“应该工作的”，但是当我按下打印按钮时，输入元素为空。

我不明白我需要获得什么标记才能将Vue.js的模型值写在输入元素上到printWindow文档中。

更新（针对那些通过互联网找到的人）：

处理textarea标签是设置v-html属性的简单问题。

选择我用以下代码处理的标签：

        var selectElements = Array.prototype.slice.call(pageElement.querySelectorAll('select'));
        selectElements.forEach(function (el) {
            for (var index = 0; index < el.options.length; index++) {
                option = el.options[index];
                if (option.value === el.value) {
                    option.setAttribute('selected', true);
                    return;
                }
            }
        });

Answer 1

这是因为在复制元素时，实际上并没有复制它们的状态（例如，文本输入的value或复选框的checked属性）。因此，您需要做的是遍历pageElement节点中的所有输入元素，然后将存储的值分配为HTML属性：

var pageElement = this.$el.querySelector('#pickList');
var inputElements = Array.prototype.slice.call(pageElement.querySelectorAll('input'));
inputElements.forEach(function(el) {
    if (el.type === 'text')
        el.setAttribute('value', el.value);

    if (el.type === 'checkbox' && el.checked)
        el.setAttribute('checked', '');
});

在此处查看固定的小提琴：https://jsfiddle.net/teddyrised/1h6e4n7z/

这还意味着，如果您有其他输入类型，例如，<select>将需要单独处理，<textarea>也将需要更新上述逻辑。

Answer 2

将todo.note传递给您，作为HTML标记中的value属性。例如： <input v-model="todo.notes" value="todo.notes" />

Vue.js输入元素值为空

2 个答案: