vue 二级列表折叠面板

Posted 2020-11-05

请求出来的数据是二级列表，需要点击一级列表展开相应的二级列表

data(){
   return {
       info: [
     {name:‘一级菜单1‘,lists:[{price:1},{price:2}]},
     {name:‘一级菜单2‘,lists:[{price:1},{price:2}]},
     {name:‘一级菜单3‘,lists:[{price:1},{price:2}]}
    ]
    }
}

<div v-for="item in info">
     <div @click="toggle(item)">{{item.name}}  {{item.lowprice}}</div>
     <ul v-show="item.isShow">
       <li v-for="list in item.lists">{{list.price}}</li>
    </ul>
</div>

点击显示隐藏二级列表

this.info.forEach(i=>{
          // console.log(i)
          // 给对象加一个true/false的属性，控制下级列表的显示隐藏
          i.isShow=== undefined? this.$set(i,‘isShow‘,false) : i.isShow= false;

          // 这个属性是在一级列表显示下级列表中的最低价
          i.lowprice === undefined? this.$set(i,‘lowprice‘,0):i.lowprice = 0;
          i.lists.forEach(j=>{
          if(j.price<i.lists[0].price){
                    i.lowprice = j.Price;
          }else{
             i.lowprice =  i.PriceList[0].Price;
          }
       })
  })