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

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

clipboard.png

<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>
阅读 1.6k
评论
    4 个回答

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

      • 1.2k

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

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

          • 142

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

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

            登录后参与交流、获取后续更新提醒