How to write vue .sync in javascript using createElement render function

Question

I am changing my code from the template file to the render function. Now I have this HTML:

:open.sync="state"

But I don't know how to translate this to JavaScript. How to write this to the createElement function?

Answer 1

Remember that

:open.sync="state"

is basically syntax sugar for

:open="state" @update:open="state = $event"

Then the equivalent in the render function would be:

createElement('child', {
  props: {                                   // :open="state"
    "open": this.state
  },
  on: {                                      // @update:open="state = $event"
    "update:open": ($event) => {
      this.state = $event;
    }
  }
})

Demo:

Vue.component('child', {
  template: '#child',
  props: ['open']
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  render(createElement) {
    return (
      createElement('div', [
        this.message,
        createElement('br'),
        createElement('child', {
          props: {
            "open": this.message
          },
          on: {
            "update:open": ($event) => {
              this.message = $event;
            }
          }
        })
      ])
    );
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <child :open.sync="message"></child>
</div>

<template id="child">
  <div>
    <input type="text" :value="open" @input="$emit('update:open', $event.target.value)">
    open: {{ open }}
  </div>
</template>