我的 JS fiddle 问题在这里:
https://jsfiddle.net/taslar/krcfx4u5/9/
<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;
}
}
});
最佳答案
那是因为当您复制元素时，您实际上并没有复制它们的状态(例如文本输入的 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', '');
});
在这里查看您的固定 fiddle :https://jsfiddle.net/teddyrised/1h6e4n7z/
这也意味着如果您有其他输入类型，例如 <select>，您将需要更新上述逻辑。将需要单独处理，<textarea> 也是如此。 .
关于javascript - Vue.js 输入元素值为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54023480/