Как получить разрывы строк с помощью Javascript и VUE

Question

В ответе от API я получаю простой текст, который содержит разрывы строк следующим образом:

"plain_text": "INFORMACION DEL PRODUCTO: \ n \ nProducto:

Как я могу использовать эти разрывы строк (\ n \ n) при печати на веб-странице с помощью Javascript (я использую VUE)?

Поскольку он пропускает только текст без разрывов строк.

Я добавляю изображение того, как оно печатается с VUE, но в инспекторе, если оно появляется с разрывом строки.

Answer 1

В HTML пробелы сжимаются в один пробел.Проверьте this на похожую запись.

Чтобы иметь разрывы строк в рендеринге html, вы должны вручную заменить '\ n' на <br/> теги.

Answer 2

Использовать свойство CSS white-space ...

const res = {"plain_text": "\t\t\t\tINFORMACION DEL PRODUCTO:\n\nProducto:"}
new Vue({
  el: '#app',
  data: { res }
})

.pre-formatted {
  white-space: pre-wrap; /* ? this is the important part */
  border: 1px dotted;
  padding: 1rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <p class="pre-formatted">{{res.plain_text}}</p>
</div>