CODEWITHSUNDEEP
javascripthtmlcssvue.js
Denis L.
Denis L.

Reputation: 424

Get new rows from textarea with v-model - VueJS

I have a concern how to get the string from textarea but also to get every new row added by pressing enter, also TAB space. Priority is to get every new row, so I can use that string to add to paragraphs but to respect new rows, TAB spaces.

Example:

Textarea text: http://prntscr.com/kvbbcv.

When I add value to the paragraph: http://prntscr.com/kvbbur

One more example: http://prntscr.com/kvhmca

What would be the best practice to fix this problem?

Code:

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

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

Upvotes: 0

Views: 1830

Answers (2)

Denis L.
Denis L.

Reputation: 424

I found the solution to resolve this problem.

The solution is to use <div contenteditable></div> and get the value from this <div> when content inside of it is changed using @input="contentEditableChange()"

The function will return the value as HTML. But using v-html you can convert html string to html preview.

So final solution code is:

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

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

Method:

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

Upvotes: 2

Bachtiar Panjaitan
Bachtiar Panjaitan

Reputation: 415

if you using ckeditor, you can try like this

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

because ckeditor has added new lines automatically. or if you use textarea, add a <br> tag manually.

Upvotes: 0

Related Questions