在 VueJS 中使用新行显示在表单中输入的文本

Question

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.

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>

Answer 1

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>