Adding custom HTML element inside template using functions Vue.js

Question

Is there any way to render html element with custom properties inside template tag using javascript functions?

Example what I try to achieve:

<template>
  <div class="test">
    {{ testFunction(param1,param2,param3) }}
  </div>
</template>


<script>
export default {
....
  methods: {
    testFunction(param1,param2,param3) {
      return `<button @click="function()">Click</button>`;
   }
  }
};
</script>

Answer 1

Directly you will get interpolated html, like this

<button @click="function()">Click</button>

Even if you fix it using the v-html directive to output raw HTML the button will still not work.

The right way is to use Render Functions like this:

const myComponent3 = {   
  setup(props) {
    return () => h('button',  
      {
        onClick(event) {
          alert('Click');
        }
      },
      'Click Me!'
    )
  }
}

Here is the playground with samples:

 const { createApp, h } = Vue; const myComponent1 = { template: '#my-component', methods: { testFunction(par1) { return `<button @click="function()">Click</button>`; } } } const myComponent2 = { template: '<div v-html="rawHTML()"></div>', methods: { myClick() { alert('Click'); }, rawHTML(par1) { return '<button @click="myClick()">Click</button>'; } } } const myComponent3 = { setup(props) { return () => h('button', { onClick(event) { alert('Click'); } }, 'Click Me:' ) } } const App = { components, { myComponent1, myComponent2. myComponent3 } } const app = createApp(App) app.mount('#app')

 <div id="app"> My Component 1: <my-component1></my-component1><br/> My Component 2: <my-component2></my-component2><br/> My Component 3: <my-component3></my-component3><br/> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script type="text/x-template" id="my-component"> <div class="test"> {{ testFunction( param1 ) }} </div> </script>