如果 Vue JS 中符合特定條件，如何對特定陣列項目進行編號？

Question

假設我的 vue 狀態中有一個如下所示的物件陣列：

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

在我的網頁上，所有這些名稱都已顯示在清單中。我想在網頁上顯示的內容如下：

• Daniel
• 羅斯 - 預設 1
• 雷切爾
• 喬伊
• 莫妮卡 - 預設 2
• 岡瑟 - 預設 3

從上面的例子中，我認為我想要實現的目標非常清楚。在 vue 中實現此目的最簡單的方法是什麼？

Answer 1

嘗試使用 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}`;
      });
    }
  }
})

sssccc

Answer 2

您可以使用 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)