https://github.com/posva/vue-prop-data-fallback

Vue mixin to support an optional prop by falling back to a local data
https://github.com/posva/vue-prop-data-fallback

Last synced: 11 months ago
JSON representation

Vue mixin to support an optional prop by falling back to a local data

• Host: GitHub
• URL: https://github.com/posva/vue-prop-data-fallback
• Owner: posva
• License: mit
• Created: 2018-10-13T17:25:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-09-27T22:21:23.000Z (over 4 years ago)
• Last Synced: 2024-12-28T00:07:17.277Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 2.78 MB
• Stars: 31
• Watchers: 3
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Vue Prop with Data fallabck [![Build Status](https://badgen.net/circleci/github/posva/vue-prop-data-fallback)](https://circleci.com/gh/posva/vue-prop-data-fallback) [![npm package](https://badgen.net/npm/v/vue-prop-data-fallback)](https://www.npmjs.com/package/vue-prop-data-fallback) [![coverage](https://badgen.net/codecov/c/github/posva/vue-prop-data-fallback)](https://codecov.io/github/posva/vue-prop-data-fallback) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)

> Vue mixin to support an optional prop that falls back to a local data

## Installation

```sh

npm install vue-prop-data-fallback

```

## Usage

The example below will create a prop named `value`, a local variable `_$value` (the fallback) and a computed property `$value`.

```vue

  

import { propWithDataFallback } from 'vue-prop-data-fallback'

// MySearch.vue

export default {

  mixins: [propWithDataFallback('value')],

  methods: {

    doSomething() {

      this.$value // the prop or the local value

      // it can be mutated normally

      // this will either change the local variable or emit an event

      this.$value = 'new value'

    },

  },

}

```

Now the search input's value can be optionally controlled by the parent:

```html

```

## API

### `propWithDataFallback(prop: string, event?: string, propType?: Object, options?: { data: string, computed: string, initialValue: any }) => mixinObject`

- `prop`: name of the prop that should be created

- `event`: name of the event that should be emitted to enable the usage of `.sync` or `v-model`. Defaults to `'update:' + prop` (to enable the `.sync` modifier by default)

- `propType`: value provided to the prop option. Can be a type like `String`, `Boolean`, an array of types or an object (pretty much anything [here](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)). Defaults to `{ required: false }`

- `options`: extra options to customize the names of the data and computed properties

  - `data`: name of the property added to data. Defaults to `'_$' + prop`

  - `computed`: name of the property added to computed. Defaults to `'$' + prop`

  - `initialValue`: provides an initial value to be used when no prop is provided

## License

[MIT](http://opensource.org/licenses/MIT)