1.嵌套的折叠组件数据渲染问题
1.1场景:
v-for渲染的多个折叠组件,且每个折叠组件里面嵌套子折叠组件。
嵌套的多组折叠组件,点击其他组的下拉框的数据后显示的子折叠组件数据显示的是之前的数据,得重新点一下下拉框才能刷新数据。
1.2解决思路:
由于是v-for渲染的多个折叠组件,可以点击最外层的折叠时,先把渲染数据的数组清空,然后把子折叠组件加上el-collapse标签,这样就不会互相影响了。
2.折叠组件中使用codemirror插件问题
2.1场景:
1.样式不对
2.需要点击一次之后才能显示编辑框里面的数据
2.2 原因:
应该数据没有初始化
2.3 解决方法:
使用 :key给其绑定一个ID,在折叠组件的change事件的回调函数中ID++,达到重新渲染的目的。
methods中: // 折叠面板中,嵌套的子集折叠面板 clearCollapse () { // 更新key值用来解决bug,使下拉出现JSON--解决样式和点击一次才出现数据 this.en_descriptionID++ this.selectKeyId++ }, 给子组件: <JsonEdit :value="item.cve_info.en_description" :key="en_descriptionID" />