Simplify computed properties by using helpers for Vue.js

vue-computed-helpers

This package contains a bunch of useful helpers that can be used to simplify computed properties. Instead of creating your own filters use these helpers to get a sum, check if an array is empty, or countBy a key of an object.

Helpers

There are currently 22 Computed helpers for Vue apps to use with computed properties, the full list is available here.

Where 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

To start working with the computed-helpers use the following commands to install it.

Via npm:

npm install vue-computed-helpers --save

Via yarn:

yarn add vue-computed-helpers

Import the helpers you are going to need in your project

import { empty, count } from 'vue-computed-helpers'

Usage:

export default {
  data() {
    return {
      dimmerVariations: ['', 'inverted'],
      modalVariations: ['', 'fullscreen', 'basic', 'small', 'large'],
    }
  },
  computed: {
    modalVariationsCount: count('modalVariations'),
    checkEmptyArray: empty('dimmerVariations')
  }
}

You could just display the results in the template

<h4>
<p> {{modalVariationsCount}}properties</p>
<p>Is the array empty? {{checkEmptyArray}}</p>
</h4>

That's it! If you would like to get started with vue-computed-helpers, head to the project's repository on GitHub, where you will also find the source code. Created and submitted by @michalsnik.