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

标签： javascriptruby-on-railsrubyvue.jsvuetify.js

Answer 1

更改profile 里面的内容computed替换\n为<br>

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

在模板中，您可以将其用作html这样的内容

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