I'm struggling with adding an HTML element <br /> inside a data bind. I want to modify the text "I like playing games" to include a line break, making it read as "I like playing <br /> games", but I can't seem to get it right within the data-bind parameter.
Here is the code snippet that's causing me trouble:
<aqua-text
class="text-position"
:b-section-title="'I like to playing' + <br /> + 'games'"
:description="
'Game is fun after all'
"
/>
This is what the <aqua-text> component looks like:
<template>
<div>
<h1>{{ bSectionTitle}}</h1>
<h2 class="bold">
{{ description}}
</h2>
</div>
</template>
<script>
export default {
props: {
bSectionTitle: {
type: [String]
},
description: {
type: [String]
},
}
};
</script>
Could someone please assist me in resolving this issue and pointing out where I may be going wrong?