[VUE 3]
Hello - what is the best way to render a Vue Component as an event?
Currently using renderEvent listener to render the html I want. But instead of this, I would rather render a Vue component with the template and functionality (e.g. the template calls methods in the Vue component) and pass the eventRecord in as a prop.
renderEvent({ eventRecord, element }) {
element.innerHTML = `
<div>
<div style="display:flex; justify-content:center; margin: 5px">
<button @click="[b]doSomething[/b]">
<i class="b-fa b-fa-plus-circle" style="color: #032cfc"></i>
</button>
</div>
<span style="border: 3px solid blue; border-radius: 5px; margin: 10px"> ${eventRecord.name} </span>
<span><button><i class="b-fa b-fa-arrow-circle-right" style="color: #032cfc"></i></button></span>
</div>`;
}
I have also tried the eventRenderer function, but this seems to only render html on top of the existing event element - it doesn't replace it.
Grateful for advice - thanks!