Skip to content
Computed helpers for Vue apps
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add classObject helper Mar 11, 2018
.travis.yml Add travis integration Aug 10, 2017


NPM version Build Status

This package contains bunch of useful helpers that can be used to simplify computed properties

💿 Installation

Via npm:

npm install vue-computed-helpers --save

Via yarn:

yarn add vue-computed-helpers

🚀 Usage

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

⭐️ 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) => === 5) no
findBy findBy('arrayProperty', 'id', 5) no
map map('arrayProperty', (el) => 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.

🔍 Detailed usage of some helpers


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:

  <div :class="classObj">

🔒 License

See the LICENSE file for license rights and limitations (MIT).

You can’t perform that action at this time.