How to convert a relatively simple tag to do Javascript or render more complex html? Here's an example of what I try to accomplish:
In this Vue.js SPA, there is a rich text editor (i'm experimenting with Tiptap) enabling users to write small pieces of rich text. The editor has an additional button that can mark a piece of text and apply a tag to it to mark it as a country (similar as marking something bold, only this marks it as a country). Something like this:
Lorem ipsum at <span data-country-id="42">Denmark</span>.
I have full control over how that tag would look, but I want to keep it short and front-end agnostic (so rather no javascript in there).
Required is to allow this span to onclick/onmouseover to either a v-overlay or a v-tooltip. Thus by activating it an overlay/tooltip pops up with more information about Denmark. I could also imagine I'd route it to a page on Denmark. All of this depending on where the content is shown, so you see how it has to be agnostic.
If I would be able to call a javascript function, I would be able to open a v-overlay or call a this.$router.push. I think this may also allow v-tooltips via an on-activator.
My mind came already came up with these approaches, but I may be way off here.
- Being able to call javascript, somehow.
- The data will be rendered to the screen using the Tiptap editor. Perhaps there are possibilities there?
- ...?
Update; I think I may have found a solution. How good/bad is this?:
The 'rich text' is shown when a row on a table is clicked. The selected row is stored in selected. This is where we render it:
<div ref="mycontent" v-html="selected.description_html" @click="handleClick"></div>
The description_html contains the span mentioned in the question. The handleClick function checks if an element with a data-country-id is clicked, and if so sets a global variable and opens an overlay.
handleClick(e) {
if (e.target.matches('[data-country-id]')) {
this.country_id = e.srcElement.attributes.getNamedItem("data-country-id").value
console.log(this.country_id)
this.olyCountry = true
}
},
A similar method may work for a mouseover. -- I do wonder if I have to remove the eventListener at some point? With inspiration from: Vue: Bind click event to dynamically inserted content
