Mixins to handle form data in a form and input components for you
Last updated a year ago by sam.boylett .
ISC · Original npm · Tarball · package.json
$ cnpm install @netsells/vue-form-data 
SYNC missed versions from official npm registry.

npm version Build Status codecov Mutation testing badge

Vue Form Data

Mixins to handle form data in a form and input components for you. This package makes it much easier to treat a form as a single object, and allows custom input components access to other form fields.


yarn add @netsells/vue-form-data


This package exposes 2 mixins: withFormData and withFormInput. Both are functions which return a mixin object, and can be passed options.


This is a basic mixin which creates a formData state.

import { withFormData } from '@netsells/vue-form-data';

    mixins: [

    mounted() {
        console.log('Form data:', this.formData); // {}

Options you can pass are:

  • formData - change the formData name
  • defaults - change the default formData
import { withFormData } from '@netsells/vue-form-data';

    mixins: [
            formData: 'data',
            defaults: { foo: 'bar' },

    mounted() {
        console.log('Form data:', this.data); // { foo: 'bar' }


This mixin adds the required props value and id. value must be set to the formData from the form using v-model. id is the name of the field in the formData, and optionally can be used for the id attribute on the input element.

It also adds a model and formData computed property. These handle the emit events for you. Changing model will update the value of the matching key in formData. Changing formData will change the entire object, and is useful for child inputs.

      {{ label }}

      <input :id="id" v-model="model" />
import { withFormInput } from '@netsells/vue-form-data';

export default {
    mixins: [

    props: ['label'],

withFormInput can also take options to change the names of props and computed properties.

  • id - set the name of the prop used to key the field in formData
  • value - set the name of the prop used for the formData
    • If not set to value, you will need to use the sync modifier instead of v-model: :myprop.sync="formData"
  • formData - set the name of the formData computed property
  • model - set the name of the model computed property

Current Tags

  • 0.2.0                                ...           latest (a year ago)

2 Versions

  • 0.2.0                                ...           a year ago
  • 0.1.0                                ...           a year ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dependents (0)

Copyright 2014 - 2017 © taobao.org |