【Nuxt】jsonでimportしたテキストが「\n」で改行されない時

はじめに

こんな感じでjsonにちょっと長めのテキストが入ることってよくありますよね？

  {
    "id": 1,
    "title": "『私』のバランス",
    "img": "option1.svg",
    "text": "「仕事は自分を犠牲にしてでも・・・！」そんな風に考えているあなたへ。このワークに一緒に取り組んでみませんか？",
    "modalImg": "sample.png",
    "link": "training"
  },

<template>
 <div
          class="option"
          v-for="(option, i) of options"
          :key="i"
        >
          <div class="option-img">
            <img
              :src="require(`@/assets/images/options/${option.img}`)"
            />
          </div>
          <p class="option-text">{{ option.text }}</p>
        </div>
</template>

<script lang="ts">
import Vue from 'vue';
import optionsData from '../../assets/json/optionsData.json';

export default Vue.extend({
  data() {
    return {
      options: optionsData
    };
  }
});
</script>

このtextを任意の場所で改行したいな〜っと思い、調べてみました。

👆を参考に\\nもしくは\nを入れてみました。

  {
    "id": 1,
    "title": "『私』のバランス",
    "img": "option1.svg",
    "text": "「仕事は自分を犠牲にしてでも・・・！」\nそんな風に考えているあなたへ。\nこのワークに一緒に取り組んでみませんか？",
    "modalImg": "sample.png",
    "link": "training"
  },

しかし！！！改行さない！！！

追加でcssが必要でした

<template>
 <div
          class="option"
          v-for="(option, i) of options"
          :key="i"
        >
          <div class="option-img">
            <img
              :src="require(`@/assets/images/options/${option.img}`)"
            />
          </div>
          <p class="option-text">{{ option.text }}</p>
        </div>
</template>

<script lang="ts">
import Vue from 'vue';
import optionsData from '../../assets/json/optionsData.json';

export default Vue.extend({
  data() {
    return {
      options: optionsData
    };
  }
});
</script>

<style scoped lang="scss">
  .option-text {
    white-space: pre-wrap; // 追加！！！
  }
</style>

これで改行されるようになりました！！！

white-space: pre;だと改行コード\nを入れた箇所以外では改行されなくなるので要注意！

追記 v-textを使いましょう

 <div class="option-text" v-text="optionText"></div>

Mustache構文{{}}を使用せず、v-text属性を使用しているのは、以下に理由によるものです。
タグ間のインデントや改行も出力されてしまう。
(ESLintを導入している場合)タグ間をすべて続けて書いた場合、1行が長すぎるため改行して記述するようwarningが吐かれる場合がある。

参考