Vue.jsで改行時に生じる半角スペースを削除したい

Question

前提・実現したいこと

Vue.jsを使って文字列を操作したいです。

次のようなテキストエリアに入力した文字列をpタグで表示しています。

<div id="app">
  <textarea v-model.trim="message"></textarea>
  <p v-text="message"></p>
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: ''
		}
	})
</script>

ここまでは問題なく表示できています。

このテキストエリアでは改行ができますが、出力されるテキストは改行が必要ありません。

しかし、テキストエリアで改行してしまうと、改行部分に空白スペースが発生します。

▼テキストエリアに入力するテキスト

こんにちは
こんにちは

▼出力HTMLの見た目

こんにちは こんにちは

▼ソースコード

<p>こんにちは
こんにちは</p>

この「こんにちは」と「こんにちは」の間の空白スペースを無くしたいです。

発生している問題・エラーメッセージ

v-model.trim で空白スペースを削除しているはずですが、削除されません。

環境

Vue.jsはhttps://cdn.jsdelivr.net/npm/vueを読み込んでいます。

Answer 1

messageをそのまま表示するのでなくて間でreplaceか何かで改行コードの削除を行なってはどうでしょうか？

Comments

[yamamoto1025]

replaceはVue.jsのなにかの書き方でしょうか?
具体的にはどのように書けば良いでしょうか?

[aoies]

replaceはjavascriptの関数で文字列を書き換えます。
vue.jsを勉強するのでもしまだjavascriptにあまり馴染みがないなら先にある程度javascriptを勉強しておいたほうが良いと思います。
replaceを使うなら例えばこんな感じでかけます。
https://jsfiddle.net/xk5rphcf/1/

[yamamoto1025]

ありがとうございます。
Vue.jsを使うにしても最低限JavaScriptのことを理解していないと駄目ということがわかりました！