antd vue 折叠面板 v-for 循环点击无效
问题描述
实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效
<a-collapse-panel
v-for="(item, index) in dataMap"
:key="index"
:show-arrow="false"
>
<p>{{ text }}</p>
<template slot="header"> {{ item.name }}</template>
<template slot="extra"> 数据</template>
</a-collapse-panel>
解决方案
查看文档,对于key值要求是String,但是循环的index默认是Number!
更改写法,问题解决
<a-collapse-panel v-for="(item, i) in details" :key="`${i}`">
</a-collapse-panel>
// 或
<a-collapse-panel v-for="(item, i) in details" :key="i.toString()`">
</a-collapse-panel>
antd vue 折叠面板 v-for 循环点击无效的更多相关文章
- Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法
iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...
- JS001. antd vue遍历setFieldsValue表单键值对无效 ( {} -> new Object() )
问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => ...
- for循环使用element的折叠面板遇到的问题-2
需求:每次添加一个折叠面板时,让最新的折叠面板展开,其余的关闭 动态控制展开折叠面板,首先绑定name,v-model = activeName 我们的项目中是当添加折叠面板时,直接push进这个数组 ...
- for循环使用element的折叠面板遇到的问题-1
首先,效果是点击添加折叠面板,折叠面板的title右侧是关闭的小按钮,每次添加的面板都自动展开,其他的面板自动关闭,但其中发现一个问题是,每次点击关闭的时候,虽然上一个面板被关闭了,但他的下一个会自动 ...
- antd源码分析之——折叠面板(collapse)
官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...
- 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题
问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...
- element-ui Collapse 折叠面板源码分析整理笔记(十)
Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...
- jquery-12 折叠面板如何实现(两种方法)
jquery-12 折叠面板如何实现(两种方法) 一.总结 一句话总结:1.根据点击次数来判断显示还是隐藏,用data方法保证每个元素一个点击次数:2.找到元素的下一个,然后toggle实现显示隐藏. ...
随机推荐
- 【机翻】RTnet – 灵活的硬实时网络框架
目录 RTnet – 灵活的硬实时网络框架 0 摘要 1 介绍 2 基础服务 2.1 数据包管理 2.2 UDP/IP 实现 2.3 Driver Layer 2.4 应用程序接口 2.5 捕获扩展 ...
- ViewFlipper 简单应用
AdvserView.java package com.earen.viewflipper; import android.content.Context; import android.graphi ...
- 聊聊如何在华为云IoT平台进行产品开发
摘要:华为云物联网平台承载着南北向数据互通的功能职责. 本文分享自华为云社区<如何基于华为云IoT物联网平台进行产品开发>,作者: Super.雯 . 华为云物联网平台承载着南北向数据互通 ...
- react实战系列 —— 我的仪表盘(bizcharts、antd、moment)
其他章节请看: react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划") ...
- 初始C语言作业一
1.下面哪个不是C语言内置的数据类型:( ) A.char B.double C.struct Stu D.short 解析: C语言中内置类型包括 char //字符数据类型 short //短整型 ...
- Python的.gitignore模板
参考:https://github.com/github/gitignore Python的.gitignore模板,记录一下方便查询 # Byte-compiled / optimized / DL ...
- Linux下将一个文件压缩分包成多个小文件
压缩分包 将文件test分包压缩成10M 的文件: tar czf - test | split -b 10m - test.tar.gz 解压 将第一步分拆的多个包解压: cat test.tar. ...
- 联盟链 Hyperledger Fabric 应用场景
一.说明 本文主要通过一个例子分享以 Hyperledger Fabric 为代表的联盟链应用场景. 关于 Fabric 的相关概念请先参考文章 <Hyperledger Fabric 核心概念 ...
- uniapp设置竖屏
//在APP.vue中的onLaunch钩子写入plus.screen.lockOrientation('portrait-primary');
- js 定时器 Timer
1 /* Timer 定时器 2 3 parameter: 4 func: Function; //定时器运行时的回调; 默认 null 5 speed: Number; //延迟多少毫秒执行一次 f ...