uni-app collapse响应式未触发问题

uni-app collapse响应式未触发问题

操作步骤：

<template>  
    <high-page>  
        <template #body>  
            <uni-collapse v-model="collapse" ref="collapseRef">  
                <uni-collapse-item title="产品信息" name="1" :open="collapse.includes('1')">  
                    <uni-list>  
                        <uni-list-item class="uni-list-item-required">  
                            <template v-slot:body>  
                                <view class="uni-list-item__input_context">  
                                    <text class="product">  
                                        选择明细信息  
                                    </text>  
                                    <view>  
                                        <button type="primary" size="mini" @click="getBookDetail">选择库存</button>  
                                    </view>  
                                </view>  
                            </template>  
                        </uni-list-item>  
                        <uni-list-item v-for="(item,index) in detailForm" :key="`${item.id}&amp;${index}`">  
                            <template v-slot:body>  
                                <view class="item">  
                                    <view class="input">  
                                        <view style="display: flex;align-items: center">  
                                            产品:{{ item.product_name }}<button class="btn" type="warn" size="mini" @click="onBookDel(index,-1,-1,'product')">删除</button>  
                                        </view>  
                                    </view>  
                                </view>  
                            </template>  
                        </uni-list-item>  
                    </uni-list>  
                </uni-collapse-item>  
            </uni-collapse>  
            <uni-list>  
                <uni-list-item class="uni-list-item-required">  
                    <template v-slot:body>  
                        <view class="uni-list-item__input_context">  
                            <text class="product">  
                                选择明细信息  
                            </text>  
                            <view>  
                                <button type="primary" size="mini" @click="getBookDetail">选择库存</button>  
                            </view>  
                        </view>  
                    </template>  
                </uni-list-item>  
                <uni-list-item v-for="(item,index) in detailForm" :key="`${item.id}&amp;${index}`">  
                    <template v-slot:body>  
                        <view class="item">  
                            <view class="input">  
                                <view style="display: flex;align-items: center">  
                                    产品:{{ item.product_name }}<button class="btn" type="warn" size="mini" @click="onBookDel(index,-1,-1,'product')">删除</button>  
                                </view>  
                            </view>  
                        </view>  
                    </template>  
                </uni-list-item>  
            </uni-list>  
        </template>  
        <template #footer>  
            <high-button class="h_button" style="width: 100%;" title="取消" type="default" @onSave="goback()">  
            </high-button>  
            <high-button v-if="params?.id" class="h_button" style="width: 100%;" title="更新" type="primary" @onCommit="submit()">  
            </high-button>  
            <high-button v-else class="h_button" style="width: 100%;" title="提交" type="primary" @onCommit="submit()">  
            </high-button>  
        </template>  
    </high-page>  
</template>  

<script setup>  
import { onLoad } from '@dcloudio/uni-app'  
import { onBeforeMount, onMounted, onUnmounted, ref, reactive, watch } from 'vue';  
import utils from '@/common/utils';  

const collapseTitle = ['植入信息', '基本信息', '手术及患者信息', '产品信息', '相关附件']  
const collapse = ['0']  

const detailForm = reactive([])  

const getBookDetail = async() => {  
    detailForm.push({product_name:'测试'})  
}  

onBeforeMount(() => {  
})  

onMounted(async () => {  
})  

onUnmounted(() => {  
    uni.$off(detailEvent)  
})  
</script>  

<style lang="scss" scoped>  
.uni-collapse-item .uni-collapse-item ::before {  
    content: "";  
    margin-bottom: 15px;  
    background-color: #e5e5e5;  
}  

::v-deep .uni-collapse-item__title-text {  
    position: relative;  
    padding-left: 10px;  
    font-size: 17px !important;  
}  

::v-deep .uni-collapse-item {  
    padding-left: 0 !important;  
}  

::v-deep .uni-collapse-item__title-text:before {  
    content: '';  
    width: 4px;  
    height: 12px;  
    border-radius: 10px;  
    margin-right: 6px;  
    background-color: #2979ff;  
    display: block;  
    position: absolute;  
    left: 0;  
    top: 50%;  
    margin-top: -6px;  
}  

.example-body {  
    padding: 10px;  
    background-color: #fff;  
    height: 100%;  
    min-height: 130px;  
}  

.item {  
  width: 100%;  
  display: flex;  
  align-items: center;  

  .input {  
    width: 100%;  
    .title {  
      margin-top: 10rpx;  
      display: flex;  
      align-items: center;  
    }  
    .code {  
      padding-left: 10rpx;  
      margin-top: 10rpx;  
     // font-size: 14px;  
      color: #999;  
    }  
  }  

  .btn {  
  }  
}  
</style>

预期结果：

折叠面板内出现如折叠面板外 一样的内容

实际结果：

折叠面板外视图更新，折叠面板内未响应

bug描述：

定义一个reactive([])数据，放在折叠面板collapse-item下无法响应式渲染出试图，在collapse外正常渲染更新视图，如图

Image


更多关于uni-app collapse响应式未触发问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你给的 demo 不完整，不能直接运行，utils 逻辑、height 组件未提供。内容比较多，你测试 HBuilderX 内置的 hello uniapp 里的 uniui 组件是否正常可以复现你的问题？

更多关于uni-app collapse响应式未触发问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据代码分析，折叠面板内响应式未触发的问题可能出在以下方面：

  1. 数据绑定问题：虽然detailForm使用了reactive，但collapse数组是普通数组，没有使用响应式声明

  2. 组件嵌套问题：uni-collapse-item内部使用了v-for渲染列表，但可能缺少key或存在作用域问题

  3. 状态同步问题：collapse的open状态没有与detailForm的变化同步更新

解决方案建议：

  1. 将collapse改为响应式声明：
const collapse = ref(['0'])
  1. 确保uni-collapse-item正确绑定open状态：
<uni-collapse-item :open="collapse.includes('1')">
  1. 检查detailForm的更新方式，确保使用响应式方法：
const getBookDetail = async() => {
  detailForm.push({product_name:'测试'}) // 这种方式在部分情况下可能不会触发更新
  // 可以尝试使用扩展运算符强制更新
  detailForm = [...detailForm, {product_name:'测试'}]
}
回到顶部