Отображать текст, введенный в форму, с новыми строками в VueJS - PullRequest
Новая
       12

Отображать текст, введенный в форму, с новыми строками в VueJS

0 голосов
/ 09 апреля 2020

У меня есть профиль в форме пользователя, как показано ниже. Проблема, с которой я здесь сталкиваюсь, заключается в том, что при вводе текста в это поле, как показано ниже.

Text entered in form

How text appear on front end

В базе данных текст сохраняется с символами новой строки, как показано ниже: 

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>

user. vue

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

1 Ответ

0 голосов
/ 09 апреля 2020

Измените содержимое profile внутри computed, заменив \n на <br>

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

, и в шаблоне вы можете использовать его как html содержимое, подобное этому 

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