The functions
iff(test, iftrue [, iffalse])
More readable than a ternary, and the third optional argument defaults to "" which is helpful for output.
<v-app data='{"test": false}'>
<input type="checkbox" v-model="test">
{{ iff(test, "checked!") }}
</v-app>
get(object, propertyPath)
Get a deeply nested property path without map() etc.
Will always return a flat array of values, not nested arrays etc.
Forgiving: if any part doesn't exist, it just returns null.
<v-app data='{
"list": {
"bar": [
{"foo": 1},
{"foo": 2},
{"foo": 3}
]
}
}'>
{{ get(list, "bar.*.foo") }}
<button @click="list.bar.push({foo: list.bar.length + 1})">Add more</button>
</v-app>
sum(...numbers)
Sum one or more arrays of numbers
<v-app data='{
"list": [1, 2, 3]
}'>
{{ list.join(" + ") }} = {{ sum(list) }}
<button @click="list.push(list.length + 1)">Add more</button>
</v-app>
count(...values)
Count truthy values in one or more arrays
<v-app data='{
"list": [0, "", "hello", true, false]
}'>
{{ count(list) }} values
<div v-for="(item, i) in list">
<input v-model="list[i]">
</div>
<button @click="list.push(list.length + 1)">Add more</button>
</v-app>
average(...numbers)
median(...numbers)
Calculate the average/median of one or more arrays of numbers.
<v-app data='{
"list": [1, 2, 30]
}'>
<p><label>Numbers:
<input type="number" v-for="(n, i) of list" v-model="list[i]"></label>
<button @click="list.push(list.length + 1)">Add more</button>
<p>Average is <strong>{{ average(list) }}</strong>, median is <strong>{{ median(list) }}</strong>
</v-app>
min(...numbers)
max(...numbers)
Calculate the average/median of one or more arrays of numbers.
<v-app data='{
"list": [-1, 30, 2]
}'>
<p><label>Numbers:
<input type="number" v-for="(n, i) of list" v-model="list[i]"></label>
<button @click="list.push(list.length + 1)">Add more</button>
<p>Min is <strong>{{ min(list) }}</strong>, max is <strong>{{ max(list) }}</strong>
</v-app>