如何在脚本标签vue js中渲染html

Question

I'm trying to render dynamic html in script tag

I'm create a custom data-table component for my project and now i trying to use a column for operations

but I can't assign function to button or more !

{
     field: 'operation',
     title: 'Operations',
     template: (e) => {
         return '<button v-on:click="methodFunction">Click</button>';
     }
}

please help me.

Answer 1

Which library are you using for creating the Data Table component?

You might try something like:

{
     field: 'operation',
     title: 'Operations',
     template: Vue.compile('<button v-on:click="methodFunction">Click</button>')
}

This will let Vue actually compile the template, during which it goes through the attributes passed.

Note: Vue.compile() returns a render function. https://v2.vuejs.org/v2/api/#Vue-compile