「天天吃翔」连载：这个id定义来有啥子用

今天在一个同学的代码上迭代功能，需要在「客户数」后面增加一项「房间数」

我初看代码，数组驱动，只需往数组增加一项就可以，这同学代码水平有进步呀。

<template v-for="(item, index) of countList">
  <count-item :key="index" :item="item"></count-item>
</template>

数组如下

export function countList(): CountItemClass[] {
  let countList = new Array<CountItemClass>();
  let item_1 = new CountItemClass();
  item_1.id = '1';
  item_1.type = 'customerNum';
  item_1.imgUrl = require('@/common/img/evaluation/keHu.png');
  item_1.text = '客户数';
  item_1.number = '0';
  countList.push(item_1);

  let item_2 = new CountItemClass();
  item_2.id = '2';
  item_2.type = 'sendCustomerNum';
  item_2.imgUrl = require('@/common/img/evaluation/tuiJian.png');
  item_2.text = '已推送消息数';
  item_2.number = '0';
  item_2.bgColor = '#2DB5F4';
  item_2.color = 'white';
  countList.push(item_2);

  ......
  
  return countList;
}

但，当我开始增加「房间数」，就遇到问题了，id取值有多少？

{
  let item_1 = new CountItemClass();
  item_1.id = '1';      
  item_1.type = 'roomNum';
  item_1.imgUrl = require('@/common/img/evaluation/keHu.png');
  item_1.text = '房间数';
  item_1.number = '0';
  countList.push(item_1);
}

这让我深入实现，看看id有什么用？

一看，id没啥用，这完全是给自己埋坑，找事干啊。

加上了「房间数」，咋没显示问号icon呀，我一猜就是底层写死的

<div class="left-wrap">
  <div class="text" :style="{ color: item.color }">{{ item.text }}</div>
  <div class="number" :style="{ color: item.color }">{{ item.number }}</div>
  <i class="question-icon" v-if="item.type === 'customerNum'" title="满足评价推送条件的客户数">
    <img src="../../../common/img/evaluation/question-icon.png" />
  </i>
</div>

果不其然，我也就默默的又加了判断，一起造翔...

<i class="question-icon" v-if="item.type === 'roomNum'" title="满足评价推送条件的房间数">
  <img src="../../../common/img/evaluation/question-icon.png" />
</i>