https://github.com/netsells/vue-with-prop-proxy

Proxy a prop in Vue to make it easier to set it if using v-model or the sync modifier
https://github.com/netsells/vue-with-prop-proxy

Last synced: 30 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/netsells/vue-with-prop-proxy
• Owner: netsells
• Created: 2019-03-21T11:43:29.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-04-13T13:19:10.000Z (about 3 years ago)
• Last Synced: 2025-03-24T20:11:20.617Z (about 2 months ago)
• Language: JavaScript
• Size: 968 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/%40netsells%2Fvue-with-prop-proxy.svg)](https://badge.fury.io/js/%40netsells%2Fvue-with-prop-proxy)

[![Build Status](https://travis-ci.com/netsells/vue-with-prop-proxy.svg?branch=master)](https://travis-ci.com/netsells/vue-with-prop-proxy)

[![codecov](https://codecov.io/gh/netsells/vue-with-prop-proxy/branch/master/graph/badge.svg)](https://codecov.io/gh/netsells/vue-with-prop-proxy)

[![Mutation testing badge](https://badge.stryker-mutator.io/github.com/netsells/vue-with-prop-proxy/master)](https://stryker-mutator.github.io)

# 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](https://netsells.co.uk/)

## 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.

```javascript

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

export default {

    mixins: [withPropProxy('value')],

    props: ['value'],

    template: ``

}

```

### Changing the suffix

```javascript

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

export default {

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

    props: ['value'],

    template: ``

}

```

### Using multiple props

```javascript

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

export default {

    mixins: [withPropProxy(['value', 'name'])],

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

    template: `

        


            

            

        

    `

}

```


### Using an object

```javascript

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

export default {

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

    props: ['value'],

    template: ``

}

```