How to compile Vue`s template to a render function?

Here is the code
Vue.component(‘chart-option’, {
template: <ul class="clearfix fl chart-option-list"> <li class="fl chart-option-item" v-for="(item, index) in checkedConfig"> <input class="hide" type="checkbox" :id="item.id" value="item.value" v-model="item.model" true-value="yes" false-value="no"> <label :for="item.id"> <span class="chart-option" :class="{on: item.model==='yes'}"> <i v-if="item.model==='yes'">√</i> </span> {{item.text}} </label> </li> </ul>,
props: [‘checked-config’],
});
I want to compile this Componet to a render function,Just like this
Vue.component(‘chart-option’, {
render(h) {
return ‘some html’
},
props: [‘checked-config’],
});

what should I do?help!

It’s all in the docs here https://vuejs.org/v2/guide/render-function.html. You’ll have to use createElement (or h) to create each element of your template along with its classes, attributes, properties, etc. It’s much more verbose as you can see so unless you have good reason to use the render function, it’s much simpler to use template.

You can use Vue.compile() to create a render function from your template string.

You can check the docs about it.

But generally this is not necessary to accomplish what you want - what’s the use case?

This works for me

  data() {
    return {
      template: your template here,
    }
  },
    render(h) {
      return h({
        template: this.template,
      })
    },