Custom Fields

Let's add a simple toggle control.

Create a toggle.jsx file to serve as the template:

export default function(h) {
  return <div class={'state--' + this.state} 
              on-click={this.toggle.bind(this)}>
              {this.state}
          </div>
}

Create a toggle.js component:

import merge from 'merge'
import Field from 'vue-form-2/compiled/components/fields/field'

module.exports = function() {
  return merge.recursive(Field(),{
    data: function() {
      return {
        fieldType:'toggle'
      }
    },
    computed: {
      state: function() {
        return this.getValue()?'On':'Off';
      }
    },
    methods:{
      toggle: function() {
        this.setValue(!this.getValue());
      }
    }
})
}

Register the component globally:

import toggleField from './toggle.js'
Vue.component('vf-toggle', toggleField())

Register the template:

import toggle from './toggle.jsx'
Vue.use(VueForm, [options], {toggle})

Note that the fieldType property must match the key passed in the third argument.