Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@netsells/vue-with-prop-proxy

0.2.0 • Public • Published

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

Keywords

none

Install

npm i @netsells/vue-with-prop-proxy

DownloadsWeekly Downloads

41

Version

0.2.0

License

ISC

Unpacked Size

252 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar