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

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?

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?

• javascript
• vue.js
• vuejs3

Share Improve this question Follow edited Apr 12, 2021 at 19:23 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Apr 12, 2021 at 13:10 Skeeith22Skeeith22 31644 silver badges1717 bronze badges 6

• please share what have you tried so far, or an example made using template syntax that you want to convert it to a render functioon – Boussadjra Brahim Commented Apr 12, 2021 at 13:11
• All you need is in the docs. Show us what have you tried so far. – Adam Orłowski Commented Apr 12, 2021 at 13:13
• 1 Vue 3 has this doc. v3.vuejs/guide/render-function.html#v-model – Skeeith22 Commented Apr 12, 2021 at 13:24
• I've tried A LOT OF THINGS already. @BoussadjraBrahim just a simple input text with a v-model functionality, that's it. – Skeeith22 Commented Apr 12, 2021 at 13:25
• pretty sure the docs aren't clear as it supposed to be @AdamOrlov Running JSX is a shortcut and pretty much solves my problem BUT I wanted to know how to write this thing without relying on JSX. – Skeeith22 Commented Apr 12, 2021 at 13:25

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

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

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

@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.