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" />`
}