My Objective
My goal is to take a user input string and render it with specific substrings wrapped in a component. Specifically, I am looking to identify dates within the string using a regex pattern and then wrap these dates in a Vuetify chip.
Progress So Far
https://i.sstatic.net/WMaWN.png
Above you can see a screenshot of my current progress. The textarea input is displayed below, with certain date substrings properly wrapped in Vuetify chips. This was achieved by replacing the matched substring with the necessary HTML code for the component and then rendering it using the v-html directive. Below is an example of the code used for this process.
<div style="line-height:40px;" v-html="messageOutput"></div>
let finalStr = ''
let str = 'Your a/c no. XXXXXXXXXX85 is credited on 15-11-17.'
let dateReg = /((?=\d{4})\d{4}|(?=[a-zA-Z]{3})[a-zA-Z]{3}|\d{2})((?=\/)\/|-)((?=[0-9]{2})[0-9]{2}|(?=[0-9]{1,2})[0-9]{1,2}|[a-zA-Z]{3})((?=\/)\/|-)((?=[0-9]{4})[0-9]{4}|(?=[0-9]{2})[0-9]{2}|[a-zA-Z]{3})/
const date = dateReg.exec(str)
finalStr = str.replace(date[0], `
<div class="md-chip md-chip-clickable">
<div class="md-chip-icon primary"><i class="material-icons">date_range</i></div>
${date[0]}
</div>
`)
Existing Challenges
The issue at hand is that when using custom components instead of plain HTML, the desired output is not achieved. The styles are not applied as expected and the component does not interact with events properly.
Looking for a Solution