This package contains bunch of useful helpers that can be used to simplify computed properties
Via npm:
npm install vue-computed-helpers --save
Via yarn:
yarn add vue-computed-helpers
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
}
}| 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.
Example code:
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:
{
'is-primary': true,
'has-title': true,
'wide': true
}Which can be used in template:
<template>
<div :class="classObj">
</div>
</template>See the LICENSE file for license rights and limitations (MIT).