-
-
Save ndabAP/d7a338407bb22794418bc64875af14ee to your computer and use it in GitHub Desktop.
<template> | |
<div> | |
<p>I got {{ amount }} {{ 'cookie' | pluralize(amount) }}</p> | |
<button @click="decrement">Decrement</button> | |
</div> | |
</template> | |
<script> | |
export default { | |
data: () => ({ | |
amount: 5 | |
}), | |
methods: { | |
decrement () { | |
this.amount-- | |
} | |
} | |
} | |
</script> |
import Vue from 'vue' | |
Vue.filter('pluralize', (word, amount) => (amount > 1 || amount === 0) ? `${word}s` : word) | |
new Vue({render: create => create(App)}).$mount('#app') |
Great input, I adapted your version.
This is not sufficient as the English language is much more complex:
{{ 'lady' | pluralize(2) }} becomes 'ladys' and not the correct 'ladies'
It's worth noting there are complete packages available such as https://www.npmjs.com/package/pluralize weighing in at ~18kb which will handle everything thrown at it includes some other useful features such as testing whether a word is singular or plural.
There's also an interesting solution over on SO: https://stackoverflow.com/a/57129703/10074973 but that will require additional work as it doesn't cover all special cases, meaning the former may be preferable.
I decided to do it the more manual way with:
Vue.filter('pluralize', (amount, singular, plural) => (amount > 1 || amount === 0) ? plural : singular)
so that I can use it like this:
<p>I got {{ amount }} {{ amount | pluralize('cookie', 'cookies') }}</p>
This is not very different from going completely manual but still saves a few strokes and ensures proper pluralization without adding more packages.
@iSWORD to make it even simpler to use:
Vue.filter('pluralize', (amount, singular, plural = null) => {
if (plural === null) {
plural = `${singular}s`;
}
return (amount > 1 || amount === 0) ? plural : singular;
});
Then if the word pluralizes "normally" you can just exclude the third argument:
// NOTE: Not how you actually use this, just using it as a normal function for example purposes
pluralize(1, 'cookie'); // => cookie
pluralize(2, 'cookie'); // => cookies
pluralize(1, 'octopus', 'octopi'); // => octopus
pluralize(2, 'octopus', 'octopi'); // => octopi
And while we're at it...
Vue.filter('pluralize', (amount, singular, plural = `${singular}s`) => amount === 1 ? singular : plural);
Really useful, thanks!
I added a slight modification so 0 would also append 's'.