如果 Vue JS 中满足特定条件，如何对特定数组项进行编号？

Question

假设我的vue状态中有一个如下所示的对象数组：[{name:"Daniel",default:false},{name:"Ross",default:true},{name:"Rachel",default:false},{name:"Joey",default:false}{name:"Monica&quo

P粉790187507 · Answer

尝试使用 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

P粉491421413 · Answer

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