Vue中使用v-for制作动态手风琴效果

<template>
  <div class="problem-content">
    <icm-navbar
      title="常见问题"
      @leftClick="goBack">
      <template #right>
        <span></span>
      </template>
    </icm-navbar>
  <icm-scroll
      class="demo-scroll-content"
      ref="scrollView"
      :scrolling-x="false"
      auto-reflow
    >
    <div class="problemList" v-for="(item,index) in Faq" :key="index">
      <p @click="toShow(item,index)">
      <span>{{item.about}}</span>
      <span><svg-icon :icon-class="item.isSubShow ? 'down_arrow@1x' :'up_arrow@1x'"></svg-icon></span>
    </p>
    <icm-collapse-transition>
        <div class="box" v-show="item.isSubShow">
        {{item.answer}}
        </div>
      </icm-collapse-transition>
    </div>
    </icm-scroll>
  </div>
</template>
<script>
export default {
  data () {
    return {
      Faq: [
        { isSubShow: false, about: 'Q:非公司员工是否可通过次入口申请公司客房?', answer: 'A:暂不支持,该版本仅支持在MO提单且出差人为公司正式员工,非公司正式员工可走原有MO客房申请流程。' },
        { isSubShow: false, about: 'Q:客房到期时是否可以续期?', answer: 'A:如需续住,请在退房时间结束前一天再次拟制申请,同时备注续住房间号(房源充足情况下可优先安排,房源已满时需另行协商安排);未提前拟制申请视为无续住需求。' },
        { isSubShow: false, about: 'Q:退房时间规定。', answer: 'A:各区域在14:00前退房' },
        { isSubShow: false, about: 'Q:已分配客房后,取消客房预订规范。', answer: 'A:已分配的客房,用户如取消,需在入住当日前16:00取消客房并系统对应至客房管理员;如果违反取消政策,即使没有入住,也需要其个人(对私)或部门(对公)承担费用。' },
        { isSubShow: false, about: 'Q:推送了客房预订通知,没有预订客房直接定了酒店会造成什么后果?', answer: 'A:需填写不选择公司客房的原因。' },
        { isSubShow: false, about: 'Q:推送了客房预订通知,去系统中预订不到客房怎么办?', answer: 'A:客房系统若无房源,请前往Otravel系统预订协议酒店。' },
        { isSubShow: false, about: 'Q:客房预订成功,但是没有去入住也没有取消会造成什么后果?', answer: 'A:需要其个人(对私)或部门(对公)承担费用。' },
        { isSubShow: false, about: 'Q:客房的使用是如何计算费用的?', answer: 'A:一般按照区域和房间类型定价。特殊情况说明:若两人入住则费用均摊;若连续入住超过30天则采用特殊定价政策,入住期间每日费用单价会上调。' },
        { isSubShow: false, about: 'Q:客房预订成功以后还能取消吗?', answer: 'A:可以,必须在入住当日16:00以前取消。可通过TT或电话联系酒店管理员取消。' },
        { isSubShow: false, about: 'Q:客房入住后想延长入住期限怎么办?', answer: 'A:在退房时间结束前一天再次拟制申请,同时备注房间号即可。' },
        { isSubShow: false, about: 'Q:若客房申请时间需超过15天怎么办?', answer: 'A:客房申请入住时间不得超过15天,若超过需要重新拟制客房使用申请。如需续住直接在原始入住单上续住即可。' },
        { isSubShow: false, about: 'Q:为什么去北京出差提交的客房申请被拒绝?', answer: 'A:北京客房的入住时间需大于3天,否则不予通过。' },
        { isSubShow: false, about: 'Q:国内派驻人员可以入住公司客房吗?', answer: 'A:派驻时间在一个月内可以申请公司客房,若超过一个月需要入住职员宿舍。' },
        { isSubShow: false, about: 'Q:我在外地派驻期间,需要到外地出差,出差期间客房费用如何计算?', answer: 'A:客房申请期间若有空住行为,费用照常结算。' },
        { isSubShow: false, about: 'Q:提交客房申请时,能否在申请页添加入住人?', answer: 'A:入住人的人员信息是按照出差申请单上来的,出差申请单上的出差人员和入住人员有差异时,建议重新填报出差申请。' },
        { isSubShow: false, about: 'Q:客服人员一直没有处理我的客房申请怎么办?', answer: 'A:界面上有联系客服人员的入口,点击' }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toShow: function (item, index) {
      this.Faq.forEach(i => {
        if (i.isSubShow !== this.Faq[index].isSubShow) {
          i.isSubShow = false
        }
      })
      item.isSubShow = !item.isSubShow
      this.litter = !this.litter
    }
  }
}

 

原文地址:https://www.cnblogs.com/huayang1995/p/13741044.html