Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm version Build Status codecov Mutation testing badge

Vue With Prop Proxy

A mixin to make it easy to bind prop values to models or synced props on child components

Created and maintained by the Netsells team

Usage

You can pass a string, an object, or an array of either to configure your proxies. The second argument is the options and lets you change the suffix for proxies if just passed a string.

import withPropProxy from '@netsells/vue-with-prop-proxy';

export default {
    mixins: [withPropProxy('value')],

    props: ['value'],

    template: `<input v-model="valueProxy" />`
}

Changing the suffix

import withPropProxy from '@netsells/vue-with-prop-proxy';

export default {
    mixins: [withPropProxy('value', { suffix: 'Model' })],

    props: ['value'],

    template: `<input v-model="valueModel" />`
}

Using multiple props

import withPropProxy from '@netsells/vue-with-prop-proxy';

export default {
    mixins: [withPropProxy(['value', 'name'])],

    props: ['value', 'name'],

    template: `
        <div>
            <input v-model="valueProxy" />
            <input v-model="nameProxy" />
        </div>
    `
}

Using an object

import withPropProxy from '@netsells/vue-with-prop-proxy';

export default {
    mixins: [withPropProxy({ prop: 'value', via: 'model' })],

    props: ['value'],

    template: `<input v-model="model" />`
}

About

Proxy a prop in Vue to make it easier to set it if using v-model or the sync modifier

Resources

Releases

No releases published

Packages

No packages published