使用v模型從textarea獲取新行-VueJS

Question

我擔心如何從textarea中獲取字符串，但又如何通過按Enter鍵以及TAB空間來獲取添加的每一行。 優先事項是獲取每個新行，因此我可以使用該字符串添加到段落中，但要尊重新行，TAB空間。

例：

Textarea文本： http : //prntscr.com/kvbbcv 。

當我為該段添加價值時： http : //prntscr.com/kvbbur

解決此問題的最佳實踐是什么？

碼：

<textarea v-model="comment"></textarea>

<p>{{ comment }}</p>

Answer 1

我找到了解決此問題的解決方案。

解決方案是使用<div contenteditable></div>並使用@input="contentEditableChange()"更改其中的內容時從此<div>獲取值。

該函數將值返回為HTML。 但是，使用v-html可以將html字符串轉換為html預覽。

所以最終的解決方案代碼是：

<div id="unique-element" @input="contentEditableChange()" contenteditable></div>

<p v-html="message"></p>

方法：

contentEditableChange() {
   this.message = document.getElementById("unique-element").innerHTML;
},

Answer 2

如果您使用ckeditor，可以嘗試這樣

<ckeditor v-model="comment"></ckeditor>    
<p v-html>{{comment}}</p>

因為ckeditor已自動添加了新行。 或者，如果您使用textarea，請手動添加<br>標記。