vue 循环中点击改变上下箭头的图标问题

点击箭头改变方向

 <ul class="menu-list" v-for="(data,index) in item.modelList" :key="index" :class="[index==0 ? 'item1' : '']">
          <li class="menuTitle" @click="selectItem(data.name,data.id)"  :class="activeName == data.name ? 'menuTitle': 'nonMenuTitle'">
            {{ data.name }}
            <Icon :type="show == true ? 'ios-arrow-up' : 'ios-arrow-down'" @click="arrowControl()"/>
          </li>



 arrowControl(){
    this.show = !this.show;
  },

因为是在循环里面我这么写的话点击一个，所有的图标都改变了，求详细解释

 <ul class="menu-list" v-for="(data,index) in item.modelList" :key="index" :class="[index==0 ? 'item1' : '']">
          <li class="menuTitle" @click="selectItem(data.name,data.id)"  :class="activeName == data.name ? 'menuTitle': 'nonMenuTitle'">
            {{ data.name }}
            <Icon :type="data.show? 'ios-arrow-up' : 'ios-arrow-down'" @click="arrowControl(item.modelList,index)"/>
          </li>
 
 
 
 arrowControl(arr, index){
    this.$set(arr[index], 'show',!arr[index].show)
  },

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }}
        <i
          :class="active === index ? 'el-icon-top' : 'el-icon-bottom'"
          @click="btnClick(index)"
        ></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      active: null,
      list: [
        {
          name: "a",
        },
        {
          name: "b",
        },
        {
          name: "c",
        },
        {
          name: "d",
        },
      ],
    };
  },
  methods: {
    btnClick(index) {
      this.active = index;
      console.log(this.active);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
</style>