How to change word endings in vue? For example: 1 day/3 days, 1 detail/5 details
In js code will be like:
function declOfNum(number, titles) {
let cases = [2, 0, 1, 1, 1, 2];
return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ?
number % 10 : 5]];
}
Im new with vue, sorry for simple question :]
Well, This is really straightforward. you can make a method for that.
getTitle(number) {
return `${number} detail${number > 1 ? 's' : ''}`;
}
then in your template just call this method by passing the number like this.
You might also pass title as well if you have other titles as well than detail.
{{ getTitle(2) }}
You can try to use computed property with data object:
var app = new Vue({
el: '#app',
data() {
return {
titles: ['detal', 'details'],
num: 2
}
},
computed: {
detail: function() {
if (this.num > 1) return this.titles[1]
return this.titles[0]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>{{ detail }}</p>
<input v-model="num" type="number" />
</div>