How to change word endings in vue?

user_14279662 0
Viewed 84

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 :]

vuejs2 vue.js javascript
2 Answers

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) }}

user_84662810

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>

user_119891890
Related