vue循环图标

我的需求是四个卡片,循环出来的,但是图标不一样,所以要循环图标样式来达到更换的目的

<template>
  <app-row>
    <app-col v-for="item in list" :key="item.name" class="col-card-box">
      <el-card class="pie-card">
        <app-row class="flex-column" no-gutters>
          <app-col class="pie-title" cols="auto">
            <div class="pt-6 pl-6">
              <span>{{ item.name }}</span
              ><span class="mt-6">-{{ item.date }}</span>
            </div>
            // 图标部分
            <div class="icon-box">
              <i :class="changeIcon(item.id)" />
            </div>
          </app-col>
          <app-col class="pie-content pl-6">
            <span>+</span>
            <span>
              {{ item.total || 0 }}
            </span>
          </app-col>
        </app-row>
      </el-card>
    </app-col>
  </app-row>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: "1",
          date: "本月",
          name: "加入企业端的企业",
          loading: false,
          total: 0,
        },
        {
          id: "2",
          date: "本月",
          name: "上报隐患的企业",
          loading: false,
          total: 0,
        },
        {
          id: "3",
          date: "本季度",
          name: "发生事故企业",
          loading: false,
          total: 0,
        },
        {
          id: "4",
          date: "本季度",
          name: "信用自评企业",
          loading: false,
          total: 0,
        },
      ],
      data: {},
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.list.forEach((item) => {
        item.loading = true
        this.$services.json
          .post("/api/credit/work/getPwuNumber", { label: item.id })
          .then((res) => {
            item.total = res.pwuNumber
          })
          .finally(() => {
            item.loading = false
          })
      })
    },
  },
  computed: {
    changeIcon() {
      return (type) => {
        const iconClass = {
          1: {
            "ti-dalou": true,
          },
          2: {
            "ti-yinhuan": true,
          },
          3: {
            "ti-shigu": true,
          },
          4: {
            "ti-xinyongziping": true,
          },
        }
        return iconClass[type]
      }
    },
  },
}
</script>

写法2

<i :class="[iconClass[item.id]]" />

在data里面

iconClass: ["ti-dalou", "ti-yinhuan", "ti-shigu", "ti-xinyongziping"],