https://github.com/michalsnik/vue-computed-helpers
Computed helpers for Vue apps
https://github.com/michalsnik/vue-computed-helpers
Last synced: 8 months ago
JSON representation
Computed helpers for Vue apps
- Host: GitHub
- URL: https://github.com/michalsnik/vue-computed-helpers
- Owner: michalsnik
- License: mit
- Created: 2017-08-08T22:57:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-16T13:26:13.000Z (over 7 years ago)
- Last Synced: 2025-03-23T02:04:38.096Z (9 months ago)
- Language: JavaScript
- Size: 33.2 KB
- Stars: 288
- Watchers: 6
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-computed-helpers - Computed helpers for Vue apps ` 📝 3 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue计算的,助手 - Vue.js应用程序的计算助手 (公用事业 / 代码风格)
- awesome-vue - vue-computed-helpers - Computed helpers for Vue.js apps (Components & Libraries / Utilities)
- awesome-vue - vue-computed-helpers ★254 - Computed helpers for Vue.js apps (Utilities / Code Style)
- awesome-vue - vue-computed-helpers - Computed helpers for Vue.js apps (Utilities / Code Style)
README
# vue-computed-helpers
[](https://npmjs.org/package/vue-computed-helpers)
[](https://travis-ci.org/michalsnik/vue-computed-helpers)
> This package contains bunch of useful helpers that can be used to simplify computed properties
## :cd: Installation
Via npm:
```
npm install vue-computed-helpers --save
```
Via yarn:
```
yarn add vue-computed-helpers
```
## :rocket: Usage
```js
import { eq, count, countBy } from 'vue-computed-helpers'
export default {
data() {
return {
todos: [
{ title: 'Clean house', done: false },
{ title: 'Buy beer', done: true },
{ title: 'Watch GoT', done: true }
]
}
},
computed: {
allTodosCount: count('todos'), // 3
completedCount: countBy('todos', 'done', true), // 2
allCompleted: eq('completedCount', 'allTodosCount') // false
}
}
```
## :star: Helpers
| Helper | Usage | Variable argument count allowed |
|:-------|:------|:--------------------------------|
| eq | `eq('anyProperty', x)` | no |
| notEq | `notEq('anyProperty', x)` | no|
| not | `not('anyProperty', 'anotherProp', ...)` | yes |
| and | `and('anyProperty', 'anotherProp', ...)` | yes |
| or | `or('anyProperty', 'anotherProp', ...)` | yes |
| xor | `xor('anyProperty', 'anotherProp')` | no |
| gt | `gt('numProperty', x)` | no |
| gte | `gte('numProperty', x)` | no |
| lt | `lt('numProperty', x)` | no |
| lte | `lte('numProperty', x)` | no |
| sum | `sum('numProperty', x, ...)` | yes |
| alias | `alias('anyProperty')` | no |
| bool | `bool('anyProperty')` | no |
| empty | `empty('anyProperty')` | no |
| min | `min('arrayProperty')` | no |
| max | `max('arrayProperty')` | no |
| filter | `filter('arrayProperty', (el) => el.done === true)` | no |
| filterBy | `filterBy('arrayProperty', 'done', true)` | no |
| find | `find('arrayProperty', (el) => el.id === 5)` | no |
| findBy | `findBy('arrayProperty', 'id', 5)` | no |
| map | `map('arrayProperty', (el) => el.id)` | no |
| mapBy | `mapBy('arrayProperty', 'id')` | no |
| count | `count('arrayProperty')` | no |
| countBy | `countBy('arrayProperty', 'done', true)` | no |
| classObject | `classObject('isPrimary', 'has-title:title', 'wide')` | yes |
`x` means that it can be either value or property name. If you provide a string and there will be a property with that name it's value will be used to perform the check.
## :mag: Detailed usage of some helpers
### classObject
Example code:
```js
import { classObject } from 'vue-computed-helpers'
export default {
props: ['isPrimary', 'title', 'wide']
computed: {
classObj: classObject('isPrimary', 'has-title:title', 'wide')
}
}
```
Given all above props are set and truthy, this computed property will return the following object:
```js
{
'is-primary': true,
'has-title': true,
'wide': true
}
```
Which can be used in template:
```html
```
## :lock: License
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).