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