0

I have a profile filed in the user form as below. The issue I am facing here is when I enter text in this field like as below.

Text entered in form

How text appear on front end

In the database, the text is saved with new line characters as shown below:

My Name is James Scott. I am a Software Developer.\nI live in New York.\nMy favourite programming language is Ruby and Python.

The issue is the text appears as a single line text. There is no new line for I live in New York. And My favourite programming language is Ruby and Python.

Please suggest me how I can resolve this issue. I am using VueJS on frontend and ruby on backend.

<v-form :model='user'>
 <v-text-field id="profile"
  ref="profile"
  label="Detailed Profile"
  name="user[profile]"
  v-model='user.profile'
  multi-line
  required
  class="input-element">
 </v-text-field>
</v-form>

user.vue

<div id="user-profile">{{user.profile}}</div>
user12763413
  • 1,177
  • 3
  • 18
  • 53

1 Answers1

0

Change the content of the profile inside computed replacing the \n with <br>

computed:{
  profile:function(){
    return this.user.profile.replace(/\n/g, '<br />');
  }
}

and in template you can use it as html content like this

<div id="user-profile" v-html="profile"></div>
Rijosh
  • 1,538
  • 1
  • 8
  • 11
  • Using `v-html` causes the input **not** be to sanitized anymore and makes your app **vulnerable** to XSS. Rather use the [pre](https://stackoverflow.com/questions/36729634/rendering-newline-character-in-vuejs/41495115#41495115) element like in the answers to [this duplicate](https://stackoverflow.com/questions/36729634/rendering-newline-character-in-vuejs/41495115#41495115) question. – D Malan Apr 09 '20 at 14:30