CODEWITHSUNDEEP
javascriptvue.jsobjectvuejs2vue-component
yrbet
yrbet

Reputation: 191

VueJS declension of words from number

How can we make word declension from number in VueJS? That is, to have: 0 skins, 1 skin, 2 skins, 3 skins, 4 skins, 5 skins, etc.

I have a simple code, with fixed text:

<div class="progress__text"> {{ Object.keys(bets).length }} / 50 skins</div>

I am new to VueJS and unfortunately I could not find anything about this. Please tell me, I will be grateful!

Upvotes: 1

Views: 398

Answers (1)

Dan
Dan

Reputation: 63139

You could use a couple of computeds and keep the template clean:

computed: {
  numSkins() {
    return Object.keys(this.bets).length;
  },
  textSkins() {
    // EDIT:  Since you mentioned your language has multiple declensions
    const defaultText = "skins";
    const declensions = {
      0: "sk",
      1: "skin",
      2: "skinssss",
      3: "skinsssssssss",
    }
    return declensions[this.numSkins] || defaultText;
  }
}

And in your template:

<div class="progress__text"> {{ numSkins }} / 50 {{ textSkins }}</div>

Upvotes: 2

Related Questions