Get strings from Ajax and make certain words clickable

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

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

Log in to reply