I need this right now! Where do you define the variable for “height”? Are you getting the window height programmatically? Need help with how to do that!

Hi all, very new user/developer here. I’m a python back-end developer trying to learn Vue/Quasar and get solid in Javascript/ES6 all at the same time, so bear with me!

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