Vue.jsでEnterキーを押すと、タグがテキスト出力に追加されます

Question

アプリケーションに基本的なテキストエディタ機能を追加する必要があります。
私は、ユーザーが何かを入力すると、テキストが段落に出力されるというテキストエリアを持っています。私はスペースバーを聞いて、そのテキストエリアにキーを押してメソッドをトリガーします。
私が入力したキーがテキストエリアに押されたが、私は

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

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>