情景:想要做贴吧那种折叠效果,右侧图标换成文字,有回复内容则显示已回复多少条,没有则显示回复两个字,点击之后面板展开,同时文字变成收起回复
问题:回复和“已回复多少条”,已经区分出来了,但是点击之后都变成了“收起回复”,没有根据index动态改变,代码如下:
<el-collapse accordion v-model="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>
</el-collapse>
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
},