Vue.js에서 Enter 키를 누르면Vue.js에서 Enter 키를 누르면텍스트 출력에 태그 붙이기텍스트 출력에 태그 붙이기

Vue.js에서 Enter 키를 누르면
텍스트 출력에 태그 붙이기

앱에 기본적인 텍스트 에디터 기능을 추가해야 합니다.
사용자가 무언가를 입력하면 텍스트가 단락에 출력되는 텍스트 영역이 있습니다.스페이스 바를 듣고 해당 텍스트 영역에 키를 눌러 메서드를 트리거합니다.
텍스트 영역에서 Enter 키를 눌렀을 때 텍스트 출력에도 줄 바꿈이 생기도록 하고 싶지만,

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>

Vue 내에서 DOM을 수동으로 업데이트하지 않도록 합니다.대신 계산된 속성을 사용하여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>

언급URL : https://stackoverflow.com/questions/47103864/in-vue-js-when-the-enter-key-is-pressed-add-a-br-tag-to-the-text-output