たとえば、データベースにつぎのような改行のある文章が格納されているとします。
こんにちは、みなさん。
お元気ですか。
これをそのままVue.jsのdataに格納するとエラーが発生してしまいます。
ではどのようにすれば格納することができるでしょうか。
まず、データベースから文章を取り出した後に、改行コードを別の文字列に置き換えます。つぎのコードはLaravelのController部分を取り出したものです。
1 2 3 4 5 6 7 8 | 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]]); } |
こちらの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>を改行コードに変換してやります。
1 2 3 4 5 6 7 8 9 10 11 12 | export default { props: ['textareaName', 'upper', 'textareaVal'], data: () => { return { text: '', hasError: false }; }, mounted() { this.text = this.textareaVal.replace(/<br>/g, "\n"); } } |
mountedのところで<br>を「\n」に変換しています。それをdataのtextに格納しています。
このようにすることで改行あり文章をVue.jsのdataに格納しtextareaに表示することができるようになります。
スポンサードサーチ
スポンサードサーチ