CODEWITHSUNDEEP
javascriptvue.js
Nan Da
Nan Da

Reputation: 127

How to number specific array items if they meet specific condition in Vue JS?

Let's say I have an array of objects like below in my vue state:

[
 {name: "Daniel", default: false},
 {name: "Ross", default: true},
 {name: "Rachel", default: false},
 {name: "Joey", default: false}
 {name: "Monica", default: true}
 {name: "Gunther", default: true}
]

On my web page, all these names are already displaying in a list. What I want to display on my web page is like below:

From example above, I think it's quite clear what I want to achieve. What is the simplest way to achieve this in vue?

Upvotes: 1

Views: 211

Answers (3)

gmaziashvili
gmaziashvili

Reputation: 250

You can use Array.map to iterate over all array elements and generate your desired result

const data = [
  { name: "Daniel" , default: false },
  { name: "Ross"   , default: true },
  { name: "Rachel" , default: false },
  { name: "Joey"   , default: false },
  { name: "Monica" , default: true },
  { name: "Gunther", default: true }
];

let defaultCount = 0;
const res = data.map(item => `${item.name}${item.default? ` default ${++defaultCount}`:''}`)

console.log(res)

Upvotes: 1

Tanay
Tanay

Reputation: 889

You can try this:

let defaultCount = 0;
const data = [
  { name: "Daniel", default: false },
  { name: "Ross", default: true },
  { name: "Rachel", default: false },
  { name: "Joey", default: false },
  { name: "Monica", default: true },
  { name: "Gunther", default: true },
].map((el) => {
  if (el.default) {
    defaultCount++;
    return {
      ...el,
      defCount: defaultCount,
    };
  } else {
    return {
      ...el,
      defCount: null,
    };
  }
});

console.log(data);

<li v-for="(item) in array" :key="item.name">
{{`${item.name}${item.defCount? ` - Default ${item.defCount}`:''}`}}
</li>

Upvotes: 0

Amaarockz
Amaarockz

Reputation: 4684

Try using computed property. Check the below code snippet

var app = new Vue({
  el: '#app',
  data() {
    return {
      list: [
       {name: "Daniel", default: false},
       {name: "Ross", default: true},
       {name: "Rachel", default: false},
       {name: "Joey", default: false},
       {name: "Monica", default: true},
       {name: "Gunther", default: true},
      ]
    };
  },
  computed: {
    getList() {
      let index = 1;
      return this.list.map(item => {
        return item.default ? `${item.name} - Default ${index++}` : `${item.name}`;
      });
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
 <ul>
  <li v-for="(item, index) in getList" :key="index">
  {{item}}
  </li>
 </ul>
</template>
</div>

Upvotes: 2

Related Questions