Monday, 14 August, 2017 UTC
Summary
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 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 } from 'vue-computed-helpers'; export default { data: () => ({ 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: happyAlligators.length } } </script> The full list of available helpers is below. For a more up-to-date list, see the main repository.
| Helper | Description |
|---|---|
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!