В Vue.js, когда нажата клавиша ввода, добавьте тег <br> к текстовому выводу.

Question

Мне нужно добавить некоторые основные функции текстового редактора в приложение.
У меня есть textarea, что когда пользователь что-то печатает, текст выводится в абзаце. Я слушаю пробел и нажимаю клавишу на этой текстовой области, чтобы вызвать методы.
Я хочу, чтобы вывод текста также имел разрыв строки при нажатии клавиши ввода в текстовой области, но я получаю

this.textBody.appendChild это не функция

Вот что я пытаюсь:

new Vue({
  el: "#app",
  data: {
    title: "",
    textBody: ""
  },
  methods: {
    logSpacebar: function(){
      console.log("spacebar pressed");
      //Fire corrector API?
    },
    logEnter: function(){
      console.log("pressed enter");
      var breakTag = document.createElement("br");
      this.textBody.appendChild(breakTag);
    }
  }
})

Соответствующий HTML (частично):

<input type="text" v-model="title"/>
<textarea name="" cols="30" rows="10" v-model="textBody" v-on:keyup.space="logSpacebar" v-on:keyup.enter="logEnter"></textarea>
<h2>Title: {{title}}</h2>
<p>Text body: {{textBody}}</p>

Answer 1

Я бы не стал самостоятельно обновлять DOM внутри Vue. Вместо этого используйте вычисляемое свойство в сочетании с v-html,

console.clear()

new Vue({
  el: "#app",
  data:{
    textBody: "type some text\nwith returns interspersed\nin this textarea"
  },
  computed:{
    parsedBody(){
      return this.textBody.replace(/\n/g,"<br>")
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <textarea v-model="textBody" cols="80" rows="10"></textarea>
  <hr>
  <p v-html="parsedBody"></p>
</div>