VUEJS 展开收起一个方法可以控制多个展开收起吗

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

unfold:function(){

        this.isShow = !this.isShow;
     
            if( this.isShow == true){
                this.number  =  this.bookData.length;
            }else{
                this.number  =  5;
            }



      this.twoNumber  =  this.isRead.length;
      this.threeNumber  =  this.notRead.length;

    },

相关代码

<dl class="user-book-rack">

    <dt>我的书架({{ '{{ bookData.length }}' }})
        <a href="javascript:void(0);"  @click="unfold(1)" v-show="!isShow">全部展开</a>
        <a href="javascript:void(0);" @click="unfold" v-show="isShow" >收起</a>
    </dt>
    <dd class="clearfix">
        <ul v-if="bookData.length != 0">
            <li v-for="(lists,index) in bookData"v-if="index < number ">
                <book-rack :list='lists'></book-rack>
            </li>
        </ul>
        <div class="no-content" v-else>
            <img src="https://cdn1.ishuteng.cn/user/201807/31/b60f0399ad1ba7ad528c27b6a9d727de" />
            <div class="reminder">
                <p>亲的书架书架还是空的哟，去书库页面看看吧 </p>
                <a  href="/book">去看看</a>
            </div>
        </div>
    </dd>
</dl>

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？