html Collapse 折叠面板自定义右侧图标后没有一一对应

情景：想要做贴吧那种折叠效果，右侧图标换成文字，有回复内容则显示已回复多少条，没有则显示回复两个字，点击之后面板展开，同时文字变成收起回复
问题：回复和“已回复多少条”，已经区分出来了，但是点击之后都变成了“收起回复”，没有根据index动态改变,代码如下：

"activeName" @change="handleChange">
        <el-collapse-item v-for="(item,index) in tableData.slice(0,tableDataNum)" :key="index"
                            :name="index">
            <template slot="title">
                <div class="List-item-r-btn" @click.stop="reply(item,index)"
                                        v-if="item.break.length==0&&!isspeakDialogTrue">
                                        {item.break.length===0?'回复':'已回复item.break.length条'}} -->
                                        回复
                                    div>
                                    <div class="List-item-r-btnInfo" v-else @click="reply(index)"
                                        v-show="!isspeakDialogTrue">
                                        已回复{{item.break.length}}条
                                    div>
                                    <div v-show="isspeakDialogTrue"
                                        class="List-item-r-btn" @click.stop="reply(item,index)">
                                        收起回复
                div>
        template>
                
              <div class="speakDialog">div>
    el-collapse-item>


    isspeakDialogTrue: false,
isspeakDialogTrueIndex: undefined,

//折叠面板
                    handleChange(val) {
                        console.log(val);
                        // this.isspeakDialogTrue = !this.isspeakDialogTrue
                    },
                    //点击回复
                    reply(item, index) {
                        console.log(item, index)
                        this.isspeakDialogTrueIndex = index
                        this.isspeakDialogTrue = !this.isspeakDialogTrue
                        this.speakDialogNum = 2
                    },

你每一条都是绑定的isspeakDialogTrue 你当然改变全部都改变了啊 把isspeakDialogTrue放进tableData 每一条里面 每一条绑定单独的