Skip to content
Proxy a prop in Vue to make it easier to set it if using v-model or the sync modifier
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
spec
src
.babelrc
.eslintrc
.gitignore
.travis.yml
README.md
package.json
stryker.conf.js
yarn.lock

README.md

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

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" />`
}
You can’t perform that action at this time.