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

    }

  }

}