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
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.
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>
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>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>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>