Skip to content
Advertisement

Vue 3 Render Function how to set up v-model and onClicks

Does anybody here have experience with Vue 3 Render Function? I don’t know how to set up the v-model and on clicks, the documentation on Vue 3 somewhat kinda useless and lacks practical usage examples.

Maybe someone has a sample code?

Advertisement

Answer

If you want to emulate the v-model directive in the render function try something like :

h('input', {
      value: this.test,
      onInput:(e)=> {
        this.test = e.target.value
      }

    })

which is equivalent to <input v-model="test" />

const {
  createApp,
  h
} = Vue;
const App = {
  data() {
    return {
      test: "Test"
    }
  },
  render() {
    return h('div', {}, [h('input', {
      value: this.test,
      onInput:(e)=> {
        this.test = e.target.value
        
      }

    }),h("h4",this.test)])
  }
}
const app = createApp(App)
app.mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app">
</div>
Advertisement