Get strings from Ajax and make certain words clickable
I am setting up an app that will retrieve strings (in my case, Bible verses) from an api via Ajax.
I then need to process the strings and make certain words have an @click function that produces a popup. Here is an example:
In the beginning H7225 God H430 created H1254-H853 the heaven H8064 and the earth. H776
All the references with numbers in them (ie “H7225”) need to be clickable and produce a popup that will then fetch another Ajax call retrieving data on the number.
I know how to add @click functions and create custom Vue components that will do what I need, the problem is, since I am fetching the data via Ajax, I can’t figure out how to get it done.
My plan was to do a regex search and replace in my backend to insert the vue-related HTML tags into my text, like this:
In the beginning <click-word> H7225</click-Word> God <click-word>H430 </click-word>…
Then I would define “click-Word” as a custom Vue component and load it into my Vue page.
However, when I data like this from Ajax, Vue doesn’t compile it into a component.
I looked briefly at an add-on called “v-runtime-template”, but so far this has only resulted in my app freezing upon returning the data from Ajax.
Is there a better or simpler way of tackling this? I’d really appreciate the help! Thanks!!
It can be done with Vue.compile(), but there are certain caveats you need to be aware of. This may point you to the right direction: https://stackoverflow.com/questions/46584301/vue-components-elements-in-v-html