プログラミング

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

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

こんにちは、みなさん。

お元気ですか。

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

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

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

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

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

mountedのところで<br>を「\n」に変換しています。それをdataのtextに格納しています。

このようにすることで改行あり文章をVue.jsのdataに格納しtextareaに表示することができるようになります。