🗒️

【Nuxt.js v2】動的な埋め込みテキスト内で改行する

2021/04/16に公開

Nuxt

tech

styleを設定する

styleにwhite-space: pre-wrap;を設定すると、改行コード\nで改行されるようになります。

<div style="white-space: pre-wrap;" v-text="hoge" />

<script>
export default {
  data () {
    return {
      hoge: '改行したい\nテキスト'
    }
  }
}

上記で、Mustache構文{{}}を使用せず、v-text属性を使用しているのは、以下に理由によるものです。

タグ間のインデントや改行も出力されてしまう。
(ESLintを導入している場合)タグ間をすべて続けて書いた場合、1行が長すぎるため改行して記述するようwarningが吐かれる場合がある。

<!-- 1. -->
<div style="white-space: pre-wrap;">
  {{ hoge }}
</div>

<!-- 2. -->
<div style="white-space: pre-wrap;">{{ hoge }}</div>

v-html(非推奨)

以下のようにv-html属性に変数をバインドすることで、プレーンなテキストではなくHTMLとして表示されます。文字列内に<br>を入れておけば、HTMLの改行タグとして認識されて改行されます。

<!-- タグ間にテキストを書かないので閉じタグの省略形で記述可能 -->
<div v-html="hoge" />

<script>
export default {
  data () {
    return {
      hoge: '改行したい<br>テキスト'
    }
  }
}
</script>

ESLintを導入している場合以下のwarningが出力されます。(エラーではないので動作には影響なし。)

warning  'v-html' directive can lead to XSS attack  vue/no-v-html

ユーザーによる入力値がここにバインドされる場合、クロスサイトスクリプティング(入力フォームから悪意あるスクリプトを埋め込まれる攻撃)のリスクがあると指摘されているので、その心配がなければを記述して、対象の行でwarningが表示されないようにしましょう。

<!-- eslint-disable-next-line -->
<div v-html="hoge" />

styleを設定する

v-html(非推奨)

Discussion