もっと詳しく

vueの改行問題をまとめておきます。いろいろな解決方法があるようですが、CSSで解決する方法が簡単そうです。

Nuxt(Vue)のマスタッシュ構文で改行されない

たとえば、複数のエラー文を表示する場合、\nはbrタグではなく、改行されません。かといって、brにすると、brという文字列がマスタッシュ構文でそのまま表示されるだけ。

this.errors = result.errors.join('\n')

その場合、CSSで調整します。

<div style=" word-wrap: break-word; white-space: pre-wrap;">
{{  errors  }}
</div>

改行禁止の場合はnowrapもあります。

white-space: nowrap;

Nuxt(Vue)のdataの改行

data側は\n、もしくはバックスラッシュ(`)にします。

  data() {
    return {
      arrays: [
        {
          id: 'info',
          name: '情報\n交換',
          icon: 'info',
        },
        {
          id: 'work',
          name: `仕事の
                 仕事の
                 仕事`
        }
     ]
  }
}

表示するところにCSSを適用させます。

white-space: pre-line;

white-space: pre-wrap; pre-line; nowrap;の違い

pre-wrapはソース中のホワイトスペースをそのまま表示しますが、pre-lineソース中のホワイトスペースを無視します。nowrapは改行禁止。

ご参考になれば幸いです。