Comment numéroter des éléments de tableau spécifiques si une condition spécifique est remplie dans Vue JS ?

Question

Supposons que j'ai un tableau d'objets dans mon état de vue comme ceci :

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

Sur ma page, tous ces noms sont affichés dans la liste. Ce que je souhaite afficher sur la page Web est le suivant :

• Daniel
• Rose - Par défaut 1
• Rachel
• Joie
• Monica - Par défaut 2
• Gunther - Par défaut 3

D'après l'exemple ci-dessus, je pense que ce que je veux réaliser est assez clair. Quelle est la manière la plus simple d'y parvenir en vue ?

Answer 1

Essayez d'utiliser l'attribut compulated. Vérifiez l'extrait de code ci-dessous

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

sssccc

Answer 2

Vous pouvez utiliser Array.map pour parcourir tous les éléments du tableau et générer le résultat souhaité

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)