Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skyrpex/props-to-local
Vue mixin that maps props to local data
https://github.com/skyrpex/props-to-local
mixin props vue
Last synced: about 1 month ago
JSON representation
Vue mixin that maps props to local data
- Host: GitHub
- URL: https://github.com/skyrpex/props-to-local
- Owner: skyrpex
- License: mit
- Archived: true
- Created: 2016-12-01T14:53:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-12T12:52:27.000Z (over 4 years ago)
- Last Synced: 2024-01-08T08:50:32.714Z (5 months ago)
- Topics: mixin, props, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@skyrpex/props-to-local
- Size: 181 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue-refactor - @skyrpex/props-to-local
- awesomer-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue. - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local ★6 - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
- awesome-vue - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Components & Libraries / Utilities)
- awesome-vuejs - @skyrpex/props-to-local - Vue mixin that maps props to local data. (Utilities / Miscellaneous)
README
# Props To Local
[](https://circleci.com/gh/skyrpex/props-to-local) [](https://ci.appveyor.com/project/skyrpex/props-to-local) [](https://travis-ci.org/skyrpex/props-to-local)
> Works with:
>
> 
This mixin will sync down properties to local data. This allows defining a property that can be changed within the component (using v-model, for example).
A case of use is creating a checkbox component that that can be correctly toggled without passing down a value through a prop.
## Installation
`npm install @skyrpex/props-to-local`
## Usage
```html
import propsToLocal from '@skyrpex/props-to-local';
// In this example, a 'value' prop is given to propsToLocal.
export default {
mixins: [
propsToLocal({
// Normal props here
value: {
type: Boolean,
default: false,
},
}),
],
};
```
The above example will generate the following component:
```js
export default {
props: {
value: {
type: Boolean,
default: false,
},
},
data() {
return {
local: {
// Will default to false, as stated above.
value: this.value,
},
};
},
};
```
## Options
```html
import { identity } from 'lodash';
import propsToLocal '@skyrpex/props-to-local';
export default {
mixins: [
propsToLocal({
value: {
type: Boolean,
default: false,
// Watch prop changes deeply (defaults to false).
deep: false,
// Format props before overwriting local values (defaults to Lodash.Identity).
format: identity,
},
}),
],
};
```