vue制作展开收起效果

<template>
  <div>
    <div class="report-list-title">
	    <div v-for="(item,index) in newTeamA"
	         :key="'infoA-'+ index"
	         @click="toggle(item)">
	      <div class="report-list">
	          列表展示的内容XXXXX
	      </div>
	      <transition name="fade"
	                  mode="in-out">
	        <div  v-show="item.choose">
	              这里是展开的内容XXXX
	        </div>
	      </transition>
	    </div>
   </div>

</template>

<script>
export default {
  name: 'GameList',
  data () {
    return {
      newTeamA: [
		{
		"endGame": 0,
		"mvp": true,
		choose:false
		},
		{
		"endGame": 1,
		"mvp": false,
		choose:false
		}]
    }
  },
  methods: {
    toggle: function (item) {
        item.choose = !item.choose;
        this.$forceUpdate()
    }
  }
}

</script>

<style lang="less" scoped>
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.border {
		border-bottom: thin solid #2d344c;
		border-width: 0 0 1px 0;
	}
}

</style>

如果想要实现，点击当前列展开闭合，点击下一个上一个闭合效果，需要在加上这段：

    toggle: function (item, newTeamA) {
      newTeamA.forEach((v) => {
        if (item.playerId === v.playerId) {
        } else {
          v.choose = false;
        }
      });
      if (this.types != 'share') {
        item.choose = !item.choose;
        this.$forceUpdate()
      }
    }

在toggle函数里面在加一个参数。