使用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>标记。