michalsnik/vue-computed-helpers

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

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

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:

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>

:lock: License

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