有没有办法通过点击vuejs中的列表项来改变图标的颜色？

data() {
  return {
    iconColor: 'defaultColor'
  };
}

<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id" @click="changeIconColor(item.id)">
        <i :class="getIconClass(item.id)"></i>
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

methods: {
  changeIconColor(itemId) {
    // 根据itemId更新iconColor的值
    this.iconColor = itemId;
  },
  getIconClass(itemId) {
    // 根据iconColor的值返回不同的类名
    return this.iconColor === itemId ? 'activeColor' : 'defaultColor';
  }
}

.defaultColor {
  color: #000; /* 默认颜色 */
}

.activeColor {
  color: #f00; /* 激活颜色 */
}