<el-collapse v-model="activeSection" accordion>
<el-collapse-item
:name="index"
v-for="(item, index) in addArray"
:key="item.sectionCount"
ref="collapse"
>
<videoContent :item="item"></videoContent>
</el-collapse-item>
</el-collapse>
情景:
el-collapse绑定了 addArray,在操作时, 展开折叠面板时,addArray更新。但是通过测试发现,el-collapse-item中的item并不会更新数据,只有收起折叠面板时才会更新item数据。
解决方法:
使用 $forceUpdate()
方法来强制刷新组件,这样 el-collapse-item 的数据变动会触发重新渲染,确保视图更新及时。
<template>
<el-collapse v-model="activeSection" accordion>
<el-collapse-item
:name="index"
v-for="(item, index) in addArray"
:key="item.sectionCount"
ref="collapse"
>
<!-- 省略部分代码 -->
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeSection: null, // v-model 绑定数据
addArray: [], // el-collapse-item 数据
forceUpdateKey: 0, // 强制刷新的标识
};
},
methods: {
// 假设有一个方法用于更新 addArray 的数据,比如 pushItemToArray
pushItemToArray(item) {
this.addArray.push(item);
this.forceUpdateKey++; // 每次添加新数据时,增加 forceUpdateKey,触发强制刷新
},
// ... 其他方法
},
watch: {
// 监听 forceUpdateKey 变化,触发强制刷新
forceUpdateKey() {
this.$forceUpdate();
},
},
};
</script>