suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie nummeriere ich bestimmte Array-Elemente, wenn eine bestimmte Bedingung in Vue JS erfüllt ist?

Angenommen, ich habe eine Reihe von Objekten in meinem Vue-Zustand wie folgt:

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

Auf meiner Seite werden alle diese Namen in der Liste angezeigt. Was ich auf der Webseite anzeigen möchte, ist Folgendes:

Anhand des obigen Beispiels ist meiner Meinung nach ziemlich klar, was ich erreichen möchte. Was ist der einfachste Weg, dies in Vue zu erreichen?

P粉665427988P粉665427988270 Tage vor525

Antworte allen(2)Ich werde antworten

  • P粉790187507

    P粉7901875072024-03-31 15:33:32

    尝试使用 compulated 属性。检查下面的代码片段

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

    Antwort
    0
  • P粉491421413

    P粉4914214132024-03-31 14:41:07

    您可以使用 Array.map 迭代所有数组元素并生成您想要的结果

    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)

    Antwort
    0
  • StornierenAntwort