Simplify Common Vue.js Computed Properties with vue-computed-helpers

Joshua Bemenderfer

Computed Properties in Vue are an amazing innovation that really cut down on development time. Some of the most common uses for them are โ€œlocal reducersโ€ for some data structure. (For example, to pull a particular element out of an array, or find the length of it, or count the number of elements and so on.) While the code for this isnโ€™t particularly complex, itโ€™s also something rather annoying to have to write all the time. vue-computed-helpers takes care of a number of these use-cases with a set of simple one-liners.

Installation

Install vue-computed-helpers in your Vue.js project.

# Yarn
$ yarn add vue-computed-helpers

# or NPM
$ npm install vue-computed-helpers --save

Usage

vue-computed-helpers provides a number of simple helper methods, documented below, which can be used to create automatically-updated bindings in your templates.

For example:

Example.vue

<template>
  <div class="alligator-information">
    <p>There are {{numberOfHappy}} happy alligators.</p>
    <div v-for="alligator of alligators">
      <p>Name: {{alligator.name}}</p>
      <p>Weight: {{alligator.weight}}</p>
    </div>
  </div>
</template>

<script>
import { filter, count } from 'vue-computed-helpers';

export default {
  data() {
    return {
      alligators: [
        {
          name: "Betty",
          weight: 850,
          isHappy: true
        },
        {
          name: "Thompson",
          weight: 792,
          isHappy: false
        },
        {
          name: "Hubert",
          weight: 927,
          isHappy: true
        }
      ]
    }
  },

  computed: {
    happyAlligators: filter('alligators', 'isHappy', true),
    // It's easy to build chains!
    numberOfHappy: count(happyAlligators)
  }
}
</script>

The full list of available helpers is below. For a more up-to-date list, see the main repository.

HelperDescription
eq(propertyName: String, valueOrPropertyName: String || any)Tests if two props (or a prop and a value) are equal.
notEq(propertyName: String, valueOrPropertyName: String || any)Tests if two props (or a prop and a value) are not equal.
not(propertyName: String, ...)Returns true if all specified properties are falsey.
and(properyName: String, ...)Returns true if all specified properties are truthy.
or(properyName: String, ...)Returns true if any specified properties are truthy.
xor(properyName1: String, propertyName2: String)Returns true if the specified properties are not equal.
gt(numericProperyName: String, valueOrPropertyName: String || Number)Returns true if the specified property is greater than another property or numeric value.
gte(numericProperyName: String, valueOrPropertyName: String || Number)Returns true if the specified property is equal to or greater than another property or numeric value.
lt(numericProperyName: String, valueOrPropertyName: String || Number)Returns true if the specified property is less than another property or numeric value.
gte(numericProperyName: String, valueOrPropertyName: String || Number)Returns true if the specified property is equal to or less than another property or numeric value.
sum(valueOrPropertyName: String || Number, ...)Returns the sum of all specified properties and values.
alias(propertyName: String)Returns the specified property. Not particularly useful except maybe as a pointer.
bool(propertyName: String)Casts the specified property to a Boolean value.
empty(propertyName: String)Returns true if the specified property is falsey or has a length of 0.
min(arrayProperyName: String)Returns the lowest value of an array of numeric values.
max(arrayProperyName: String)Returns the highest value of an array of numeric values.
filter(arrayProperyName: String, comparator: Function)Filters an array property with the provided filter function.
filterBy(arrayProperyName: String, key: String, value: any)Filters an array of objects by key, preserving any key that matches the provided value.
map(arrayProperyName: String, mapper: Function)Maps an array of objects with the provided mapping function.
mapBy(arrayPropertyName: String, key: String)Maps an array of objects into an array of values from those objects specified by the key provided.
count(arrayPropertyName: String)Counts the number of elements in an array.
countBy(arrayProperyName: String, key: String, value: any)Counts the number of elements in an array of objects that match the key and value provided.

Most likely most of your use-cases can be handled by built-in JS array functions, but a few of these might prove useful to you. Enjoy!

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#