JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@vue/[email protected]/dist/vue-composition-api.js"></script>
<div id="app">
  <user-edit v-model="form"></user-edit>
  <p>
    {{ form }}
  </p>
</div>

JavaScript

const { computed } = VueCompositionAPI

const UserEdit = {
  template: `
    <div>
      <input v-model="formValues.name">
      <input v-model="formValues.age">
      <input v-model="formValues.location">
    </div>  
  `,
  
  props: ['form'],
  
  model: {
    prop: 'form',
    event: 'update:form'
  },
  
  setup (props, { emit }) {
  	// Rather than creating function for each property individually we can just use
    // a proxy to intercept them all. In browsers that don't support Proxy we could
    // create an object with get/set property accessors instead
    const formValues = computed(() => {
      return new Proxy(props.form, {
        set (target, prop, value) {
          emit('update:form', {...props.form, [prop]: value })
          return true
        }
      })
    })
    
    return {
      formValues
    }
  }
}

new Vue({
  components: {
    UserEdit
  },
  
  data () {
    return {
      form: {
        name: 'A',
        age: 12,
        location: 'Elsewhere'
      }
    }
  }
}).$mount('#app')