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

user_12702965 0
Viewed 76

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

vuejs3 vue.js javascript
5 Answers

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.

user_174388900

You can use v-html :

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const separateFirstFourWords = (words) => {
      let newStr = `${words.substring(0, 4)} <br> ${words.substring(4, words.length)}`;
      return newStr;
    };
    const something = ref(true)
    return { separateFirstFourWords, something }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>
  <button @click="something = !something">change something</button>
</div>

user_119891890

Why not use v-if? That way your app will be safe against HTML/JS injections.

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const words = 'comeoutside'
    const something = ref(false)
    return { words, something }
  }
})
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
    <div v-if="something"><p>{{words}}</p></div>
    <div v-else>
    <p>{{words.substring(0, 4)}}
    <br/>
    {{words.substring(4, words.length)}}</p>
    </div>
</div>

user_71169990

You can use v-html directive as suggested by Gabe but yeah be aware of XSS attack.

Live Demo :

new Vue({
  el: '#app',
  data: {
    something: false,
    comeoutside: 'Hello VueJS !'
  },
  methods: {
    separateFirstFourWords(str, breakAt) {
      let newStr = `${str.substring(0, breakAt)} <br> ${str.substring(breakAt,str.length)}`;
      return newStr;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="something ? comeoutside : separateFirstFourWords(comeoutside, 5)"></p>
</div>

user_41163000

You can easily achieve that using CSS white-space: pre-line; and instead of using <br> and rendering using v-html, you can consider using \n so you can avoid XSS attack.


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

</script>

<template>
  <h1>{{ msg }}</h1>
  <p v-text="separateFirstFourWords('comeoutside')"></p>
</template>

<style>
  p {
    white-space: pre-line;
  }
</style>
user_100678980
Related