【Vue.js】v-textでTextarea(テキストボックス)の中身を改行する方法！

みなさんこんにちは。
今回は、Vue.jsの改行方法について記していきます。

v-htmlなどを使用すれば簡単にできるのですが、
クロスサイトスクリプティングができてしまうので、
セキュリティ面でかなり不安です。

XSS対策用のライブラリ等を使用すれば防げはしますが、
明らかに面倒臭いです。

v-textを使った上で改行する方法をみていきましょう。

あくまで改行するための一つの方法です。
使用して生じた弊害は、自己責任でお願い致します。

String.prototype.replace()を使用する
自分の処理の流れ
Vue.jsでTextareaの中身を改行する方法
プログラミングのスキルアップをしたい方は？
おわりに

String.prototype.replace()を使用する

replace() メソッドは、pattern にマッチした文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。pattern は文字列または RegExp、replacement は文字列または各マッチで呼び出される関数です。pattern が文字列の場合、最初に一致した箇所のみを置き換えます。

引用:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

つまり、replaceメソッドを使用して
textareaの改行（\n）を何か別の文字列に変換して
最終的にその文字列を(\n)に変えてあげれば、改行することが可能です。

自分の処理の流れ

私の処理の流れをご説明します。

簡単に流れを説明しますと、
テキストボックスで入力した値をDB経由でフロントに表示したいという
感じです。

さっそく、改行する方法を書いていきます。

Vue.jsでTextareaの中身を改行する方法

<template>
  <div id="app">
    <textarea v-model="content"></textarea>
    <div @click="post()">ボタン</div>
    <div id="output">{{newLine(content)}}</div>
  </div>
</template>
<script>
  var app = new Vue({
    el: "#app",
    data:{
    content:''
  },
methods:{
  post(){ //私は、textareaの改行コード \n を文字列\nに変換
    this.content.replace(/\n/g,'\\n') //ajax //結果をcontentに返す
    this.content = res['data']['content']; },
  newLine(content){
    return content.replace(/\\n/g,'\n');
  }
}
});
</script>
<style>
 .output{ white-space:pre-line; word-wrap: break-word; }
</style>

不必要な処理は、かなり省きましたが、
流れとしましては、

１、Textareaに入力された値から改行コード(\n)を
文字列 \ nに変換します。