Question

我想知道如何将已经使用document.createElement方法创建的Element插入模板。我不确定如何进行此操作，因为最终我也想绑定该特定textBox的内容。这是我到目前为止所拥有的（无效）代码，以说明我喜欢做什么：

<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]
  },
  ...
}

Answer 1

首先， 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('entity which you want to append');

如何将使用document.createElement创建的对象插入模板？

1 个答案: