Как сохранить \ n на внешнем интерфейсе при получении данных из базы данных Firebase?

Question

Я пытаюсь получить данные из базы данных Firebase Realtime с сохранением \ n во внешнем интерфейсе.

С помощью свойства css: "white-space: pre-line", я могу отправить\ n для базы данных firebase, но когда я пытаюсь извлечь данные из внешнего интерфейса с помощью Vue.js, он не поддерживает \ n.

База данных Firebase - это массив, поэтому я попытался преобразовать массивв строку, и он преобразует "\ n" в пустое пространство. Я не нашел никакой онлайн-справки о том, как сохранить \ n при отображении данных на внешнем интерфейсе

Моя база данных Firebase:

answers
 0: "some data"
 1: "some data. more data.\nsomething"

Я использую цикл for для отображения каждого ответа нановая линия. Но разделяет каждое значение ключа на новую строку, а не данные с помощью "\ n".

Любая помощь или руководство приветствуются.

Answer 1

Вы можете заменить \n на <br/> и отобразить его в виде HTML.

let str = "some data. more data.\nsomething";

str = str.replace('\n', '<br/>');
// "some data. more data.<br/>something"

И затем отобразить его с помощью директивы v-html.

<span v-html="str"></span>

Это отобразит ваш контент в формате html.

Однако: динамическое отображение произвольного HTML на вашем сайте может быть очень опасным, поскольку может легко привести к уязвимости XSS. Используйте HTML-интерполяцию только для доверенного содержимого, но не для предоставленного пользователем содержимого.

См. Здесь: https://vuejs.org/v2/guide/syntax.html#Raw-HTML

Пример:

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    answers: ["some data", "some data. more data.\nsomething"]
  },
  computed: {
    transformed_answers() {
      return this.answers.map(a => a.replace('\n', '<br/>'));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="answer in transformed_answers">
    <p v-html="answer"></p>
  </div>
</div>