在 VueJS 中使用新行顯示在表單中輸入的文本

Question

我在用戶表單中提交了一個配置文件，如下所示。 我在這里面臨的問題是當我在此字段中輸入文本時，如下所示。

在數據庫中，文本以換行符保存，如下所示：

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

問題是文本顯示為單行文本。 我住在紐約，沒有新線路。 而我最喜歡的編程語言是 Ruby 和 Python。

請建議我如何解決這個問題。 我在前端使用 VueJS，在后端使用 ruby。

<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>

用戶.vue

<div id="user-profile">{{user.profile}}</div>

Answer 1

更改內部profile的內容，將\n computed為<br>

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

在模板中，您可以將其用作html內容，如下所示

<div id="user-profile" v-html="profile"></div>