How can I insert a line break , render html for text in VUE?

Question

I got a string coming to frontend like this comeoutside

But in html I need to render this with a condition

const separateFirstFourWords = (words) => {
  let newStr = `${words.substring(0, 4)} <br> ${words.substring(4,words.length)}`;
  return newStr;
};

<p>{{something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')}}</p>

As you can see I wanna separate the two words and want a line break between these words how can I achieve that in VUE

Answer 1

You could use the v-html directive for that:

<p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>

This will render the outcome of the ternary operator as HTML.

Be aware of the cross site scripting vulnerabilities this might create, though, see warning in v-html documentation.