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

Question

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?

Answer 1

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/[email protected]/dist/vue.global.prod.js"></script>

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

Answer 2

@Boussadjra Brahim

render() {
    self = this; // Added this

    return h('div', {}, h('input', {
        value: this.test,
        onInput(e) {
            self.test = e.target.value // Change this.test to self.test
        }
    }))
}

Thank you for this, I don't know why onKeyUp didn't work but onInput did.