改行あり文章をVue.jsのdataに格納しtextareaに表示する

たとえば、データベースにつぎのような改行のある文章が格納されているとします。

こんにちは、みなさん。

お元気ですか。

これをそのままVue.jsのdataに格納するとエラーが発生してしまいます。

ではどのようにすれば格納することができるでしょうか。

まず、データベースから文章を取り出した後に、改行コードを別の文字列に置き換えます。つぎのコードはLaravelのController部分を取り出したものです。

public function edit(Request $request)
{
    $param = ['id' => $request->id];
    $item = DB::table('posts')->where('id', $param)->get();
    $item[0]->content = str_replace("\r\n", '<br>', $item[0]->content);

    return view('/post/edit', ['form' => $item[0]]);
}

public function edit(Request $request)

{

$param = ['id' => $request->id];

$item = DB::table('posts')->where('id', $param)->get();

$item[0]->content = str_replace("\r\n", ' ', $item[0]->content);

return view('/post/edit', ['form' => $item[0]]);

}

こちらの5行目「$item[0]->content = str_replace(“\r\n”, ‘ ’, $item[0]->content);」で改行コード「\r\n」を「 」に置き換えています。7行目でViewに渡しています。

View部分にVue.jsのコンポーネントを使用しているとします。Vue.jsのコンポーネント内のdataに先ほど改行コードを に変換した「こんにちは、みなさん。 お元気ですか。」を格納してtextareaに表示しても が変換されません。これを解決するために、もう一度 を改行コードに変換してやります。

export default {
  props: ['textareaName', 'upper', 'textareaVal'],
  data: () => {
    return {
      text: '',
      hasError: false
    };
  },
  mounted() {
    this.text = this.textareaVal.replace(/<br>/g, "\n");
  }
}