Skip to content
Computed helpers for Vue apps
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add classObject helper Mar 11, 2018
tests
.babelrc
.gitignore
.travis.yml Add travis integration Aug 10, 2017
LICENSE
README.md
package-lock.json
package.json

README.md

vue-computed-helpers

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) => 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.

🔍 Detailed usage of some helpers

classObject

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>

🔒 License

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

You can’t perform that action at this time.