An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
September 7, 2019 05:50 pm GMT
Original Link: https://dev.to/krusenas/creating-a-simple-vue-pluralize-filter-j9m
Creating a simple Vue pluralize filter
There are many options how to create a pluralize function but in Vue you should probably use filters. Let's create one as it's always handy to have one.
Step 1: Add pluralize package
Let's use https://github.com/blakeembrey/pluralize to do the heavy lifting:
yarn add pluralize
Step 2: Register filter
Our pluralize filter will take two arguments - first one is the left variable in the filter and second is the filter function argument (depends on your code structure, but it's usually main.js or a dedicated filters file):
// .. your other importsimport pluralize from 'pluralize'// .. your other codeVue.filter('pluralize', function (value, number) { return pluralize(value, number)})
Step 3: Use the filter!
Now, to use the filter on the left we give it the word we want to pluralize and as an argument we pass the count:
{{ tunnels }} {{ 'tunnel' | pluralize(tunnels) }}
That's it :) Now, based on tunnels variable it will be either '1 tunnel' or '50 tunnels'.
I hope this will be useful to you once you need it!
Original Link: https://dev.to/krusenas/creating-a-simple-vue-pluralize-filter-j9m
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To