weixin_58412143 2022-08-19 10:50 采纳率: 91.6%
浏览 26
已结题

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

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

1条回答 默认 最新

  • gzczzzzzz 2022-08-19 11:24
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月27日
  • 已采纳回答 8月19日
  • 创建了问题 8月19日

悬赏问题

  • ¥15 数据量少可以用MK趋势分析吗
  • ¥15 使用VH6501干扰RTR位,CANoe上显示的错误帧不足32个就进入bus off快慢恢复,为什么?
  • ¥15 大智慧怎么编写一个选股程序
  • ¥100 python 调用 cgps 命令获取 实时位置信息
  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中