如何将使用 document.createElement 创建的对象插入到模板中? [英] How do I insert object created with document.createElement into template?
问题描述
我想知道如何将已经使用 document.createElement 方法创建的元素插入到模板中.我不确定如何在这里进行，因为最终我还想绑定该特定文本框的内容.这是我到目前为止的(非工作)代码来说明我喜欢做什么:
<div><p id="status">{{ statusMessage }}</p><div id="output" v-html="textBox"></div></模板><脚本>导出默认{name: '结果',数据() {返回 {statusMessage: "状态",文本框:对象，}},安装(){this.textBox = this.$someModule.createTextBox()console.log('textBox 应该变成:'+this.textBox)//显示:文本框应该变成:[object HTMLTextAreaElement]},...}
首先，v-html 是一个允许你使用原始 html 文本的指令.
<块引用>ref: https://vuejs.org/v2/guide/syntax.html#Raw-HTML
其次，您可以使用 ref 指令来创建指向您元素的链接 (ref="someName"):
<div id="output" ref="textBox"></div>那么:
const el = this.$refs.textBox;el.appendChild('要追加的实体');I like to know how I can insert a Element that has already been created with the document.createElement method into the template. I am not sure how to proceed here because eventually I would also like to bind the contents of that particular textBox. Here is the (non working) code that I have up till now to illustrate what I like to do:
<template>
<div>
<p id="status">{{ statusMessage }}</p>
<div id="output" v-html="textBox"></div>
</div>
</template>
<script>
export default {
name: 'Result',
data() {
return {
statusMessage: "Status",
textBox: Object,
}
},
mounted() {
this.textBox = this.$someModule.createTextBox()
console.log('textBox should become: '+this.textBox)
// Shows: textbox should become: [object HTMLTextAreaElement]
},
...
}
First of all, v-html is a directive that allow you to use raw html text.
Second of all, you can you a ref directive to create a link to you element (ref="someName"):
<div id="output" ref="textBox"></div>
Then:
const el = this.$refs.textBox;
el.appendChild('entity which you want to append');
这篇关于如何将使用 document.createElement 创建的对象插入到模板中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
