vue v-for 循环， 如何单独控制各自的展开收起，因为数据中没有true/false的属性，所以要怎么写单独控制呢？

Question

项目如图，现在的写法，针对一个订单号还好，但是如果有多个订单号，他就会点击一个，全部展开收起。想要单独控制。实在不知道改怎么写，跪求循环中的可单独展开收起的功能。谢谢大神们（本人刚毕业）

<div v-for="(item, index) in this.listOrders"  class="container ">
      
      <div  id="oderDetails" ref="oderDetails" :class="showAll?'MoreDetail':'CloseDetail'">
        <router-link
          tag="div"
          :to="/product/ + childItem.goods_pid"
          v-for="(childItem, childIndex) in item.orderDetails"
          :key="childIndex"
           class="row goodsList">
        <div class="col-xs-3 imgWrapper">
          <img v-lazy="childItem.car_img"
               alt="">
        </div>
        <div class="col-xs-9 goodInfo">
          <div class="row">
            <div class="col-xs-12 goodName">
              {{childItem.goodsname}}
            </div>
            <div class="col-xs-12 goodType">
              <span class="">Item ID:{{childItem.goodsid}}  </span>
              <span>{{childItem.car_type}}</span>
            </div>
            <div class="col-xs-12 goodPrice">
              <span class="price">${{childItem.goodsprice}}</span>
              <span class="number">/{{childItem.seilUnit}} x {{childItem.yourorder}}</span>
            </div>
          </div>
        </div>
      </router-link>
      </div>
      <div id="oderDetailsClick"  @click="showAll = !showAll;" class="show-more text-center iconfont" >{{showAll?'&#xe63c;':'&#xe635;'}}</div>
       
    </div>

Answer 1

你在获取数据源的时候循环插入一个bool字段,然后列表渲染只要在方法上把相应的bool改成对应的就可以了，例如@click="item.bool=!item.bool"

Answer 2

状态用数组判断，如果点击当前在数组里面就删除不在就push进去

Answer 3

记录下点击的订单Id,初始给null,点了后更新状态机，根据状态机来渲染展开那个订单

Answer 4

showAll可以放在this.listOrders的每一项中

<div id="oderDetailsClick"  @click="item.showAll = !item.showAll;" class="show-more text-center iconfont" >{{showAll?'&#xe63c;':'&#xe635;'}}</div>