Как вставить объект, созданный с помощью document.createElement, в шаблон?

Question

Мне нравится знать, как я могу вставить элемент, который уже был создан с помощью метода document.createElement, в шаблон. Я не уверен, как действовать здесь, потому что в конечном итоге я также хотел бы связать содержимое этого конкретного текстового поля. Вот (неработающий) код, который у меня есть до сих пор, чтобы проиллюстрировать, что я люблю делать:

<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');