How to render line breaks contained in a string?

Question

Line breaks contained in my strings merely render as   instead of actual line breaks.

I tried to use back-ticks to no avail. Is there a simple way to have line breaks rendered on the page, ideally without modify my code too deeply?

Markup:

<div
  v-for="item in faqItems"
  :key="item.id"
>
  <span class="faq-item-title">
    {{ item.title }}
  </span>
  <span class="faq-item-details">
    {{ item.text }}
  </span>
  <svg-icon name="chevron-down"></svg-icon>
</div>

JS:

faqItems: [
  {
    title: 'Nullam vehicula arcu ipsum',
    text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.<br><br>Nunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.<br><br>Donec neque leo, porttitor a diam et, sodales volutpat libero.'
  },
  {
    title: 'In iaculis egestas nisl',
    text: 'Etiam a elementum diam. Praesent lobortis pulvinar lacus, sit amet vehicula tortor.'
  }

Possible duplicate of [Vue display unescaped html](https://stackoverflow.com/questions/30877491/vue-display-unescaped-html) — Daniel Beck, Mar 06 '19 at 20:31

tao · Answer 1 · 2019-03-07T18:41:42.497

~~One way is to replace your  s with text line breaks (\n) and keep using it as text in layout:~~

{
  title: 'Nullam vehicula arcu ipsum',
  text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.\n\nNunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.\n\nDonec neque leo, porttitor a diam et, sodales volutpat libero.'
}

As Daniel pointed out, literal line breaks don't work in . Unless you map it to .innerText property of the  => Example - which, under the hood, transforms all literal breaks into  s and divides the text into different text nodes, accordingly).

The other way is to use the dedicated Vue directive for this purpose, which parses the string as html: v-html.

<span class="faq-item-details" v-html="item.text" />

score 0 · Answer 2 · answered Mar 06 '19 at 20:18

Use backticks and then add css entries as follows:

<div
  v-for="item in faqItems"
  :key="item.id"
>
  <span class="faq-item-title" style="white-space: pre-wrap;">
    {{ item.title }}
  </span>
  <span class="faq-item-details" style="white-space: pre-wrap;">
    {{ item.text }}
  </span>
  <svg-icon name="chevron-down"></svg-icon>
</div>

How to render line breaks contained in a string?

2 Answers2