質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

3回答

5367閲覧

Vue.jsの改行について

kurosuke___

総合スコア217

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

2クリップ

投稿2018/04/13 17:31

編集2018/04/14 06:13

Vue.jsのv-textで文字列を表示するとき、文字文字\n文字のようにエスケープシーケンスがそのまま表示されてしまいます。(v-htmlでも同じでした)

ネットで調べ、以下のようなメソッドを通したのですが結果は変わらず。

html

1<span v-text="newlineConvert(message)">

typescript

1newlineConvert: function(value: string){ 2 var str: string = value.replace(/\r\n/g, "<br />"); 3 str = str.replace(/(\n|\r)/g, "<br />"); 4 return str; 5}

(messageはv-forでmessagesが回ってます。)

Vue.jsのバージョンが2.0以前ではv-htmlnl2brというフィルタが使えたようですが、現在は使えないようです。

また、CSSでwhite-space: pre;をあててもだめでした。

なにか解決策はないでしょうか?

追記

UI作るのにVuetify.jsを使っていて、それが影響しているかもしれないので調べてみます。

追記2

バックエンドがPythonで、Requestsを使ってAPIを叩き、そこからDjangoでJsonResponse(data.json())をしているので、これが原因かもしれません。
<>などの不等号記号もサニタイズされてしまっているので・・・

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

試しに書いてみましたができましたね。

https://jsfiddle.net/euledge/ncbg0kwq/7/

投稿2018/04/14 03:31

euledge

総合スコア2404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurosuke___

2018/04/14 05:24

回答ありがとうございます。 ほんとだ、できるんですね・・・ 自分の場合何がだめなんだろう・・・ APIから取得した文字列ですが、それが影響してるのでしょうか・・・
guest

0

こちらを見る限りwhite-space: pre-wrap;で良さそうですよ。

投稿2018/04/14 00:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurosuke___

2018/04/14 05:23 編集

回答ありがとうございます。 white-space: pre-wrap;でもだめでした・・・
退会済みユーザー

退会済みユーザー

2018/04/14 08:03

すべてデモがついてるので、デモを動かして見てください。 ただ、読み込んでるvue.jsのリンクが切れしているので、https://jp.vuejs.org/js/vue.min.js に変えないと動きませんがすべて正しく動きますよ、
退会済みユーザー

退会済みユーザー

2018/04/14 08:05

どれも動くので、pre-wrapで動かないのであれば、v-forとsplit版とかも試してみてはいかがでしょうか?
kurosuke___

2018/04/14 08:06

Python, DjangoのRequests.getが原因でした。 置換してHttpResponseしたら解決しました。
guest

0

自己解決

print()してみたら\nのようになっていました。
これでは普通の文字列ですよね。
Pythonの方で解決策を探ります。

投稿2018/04/14 06:24

kurosuke___

総合スコア217

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問