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

Question

点击箭头改变方向

 <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;
  },

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

Answer 1

 <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)
  },