こんにちはjunです。ある日、vue.jsを使用してtextarea
の中の文章をリアルタイムにレンダーするような機能を実装しました。その時、改行文章に謎のインテンドが入り、困りました。こんな感じです。
ソースは以下の感じ(かなり簡略化してます。)
<template>
<div>
<div style="white-space:pre;">
{{test}}
<textarea v-model="test"cols="30" rows="10"></textarea>
</div>
</div>
</template>
<script>
export default {
data(){
return{
test:''
}
}
}
</script>
とても簡単でv-model
を使用してそのdata()
を表示してあるだけです。そしてCSSではwhite-space:pre;
を指定して、改行コードが存在したらそこで改行するようにします。
ただし上図のように謎のインテンドが最初の改行にあります。なぜ生じしてしまうのかを調べたところ、 エディター上でのインテンド が原因でした。以下のようにファイルを直してみます。
<template>
<div>
<div style="white-space:pre;">
{{test}}
<textarea v-model="test"cols="30" rows="10"></textarea>
</div>
</div>
</template>
</script>
{{text}}
の箇所を一番左につけることでなぜか、改行の際のインテンドがなくなりました。
またはこのようにタグを改行させず、一行内に書くことでも解決できます。
<template>
<div>
<div style="white-space:pre;">{{test}}</div>
<textarea v-model="test"cols="30" rows="10"></textarea>
</div>
</template>
<script>
export default {
data(){
return{
test:''
}
}
}
</script>
なぜwhite-space:pre;
で謎インテンドが生じてしまうのかわかりませんが、改行コードが入る箇所をエディターで整形する際は気をつけたほうがいいかもしれません。