背景
Vue.jsで非同期で取得した改行入りの文章をそのまま出力しても改行がされません。
一般的に、jsで改行を入れようと思ったら改行コードをbrタグに変換する必要があるかと思いますが、Vue.jsのデリミタは自動でHTMLタグをエスケープしてしまいます。そのため、v-htmlを使用して出力する方法がありますが、そのままだとXSSになってしまいますのでサニタイズが必須です。
クライアントサイドオンリーの方だと忘れがちな処理かと思いますので記しておきます。
方法
index.js
this.text = this.text.replace(/\n/g, '<br/>');
改行コードをbrタグに置き換える。
Index.vue
<div>{{ text }}</div>
上記のようにしても、改行コードがエスケープされてしまうのでv-htmlを使用する。
Index.vue
<div v-html="text"></div>
このままではXSSとしてJavascriptが実行されてしまうので、サニタイズが必要。
任意の HTML をあなたの Web サイト上で動的に描画することは、 XSS 攻撃を招くため大変危険です。v-html は信頼済みコンテンツのみに利用し、 絶対に ユーザの提供するコンテンツには使わないでください。
そこで下記のライブラリを使用してサニタイズします。
https://github.com/punkave/sanitize-html
index.js
import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML;
ライブラリをインポートして、$sanitizeとしてVueインスタンスに登録します。
Index.vue
<div v-html="$sanitize(text)"></div>
こんな感じで設定すれば改行ができるようになります。
以上。