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

全局只有一个 show，当然只能控制所有菜单组都是同一个状态。
你给每个菜单组一个 show 属性，按它自己的 show 来显示就好了。

<Icon :type="data.show ? 'ios-arrow-up' : 'ios-arrow-down'" ... />

顺便提醒一下：不要用 index 来作为 :key，应该在数据元素中找一个唯一属性来作为 :key，比如 data.id

Answer 2

你是如何高亮文字的，那就如何设置箭头方向啊，相同的判断逻辑。

Answer 3

实现代码部分可以全发出来吗，这样不好分析

Answer 4

把是否展开的 判断字段 show 添加到 data 中的每一项中，通过 data.show 去改变样式，但是注意 show 字段如果是在 点击事件中 添加的属性 需要通过 $set 设置