uni-collapse 动态设置折叠面板打开状态 不起效果

[Xubinming]

HX 3.2.3.20210825
mac 环境
uni-collapse 动态设置折叠面板打开状态 不起效果

[mehaotian]

value 指定的是什么 ？

[mehaotian]

因长时间无回复暂时关闭 issue ，如仍有问题请 reopen issue 继续提问。

[liuhubgit]

@mehaotian 您好！
本人遇到同样的问题

描述：

环境：

• HBuilder X 3.3.5.20211229
• win10
• 插件版本是最新的1.4.3（2022-01-25）

在官方项目
uni-collapse 折叠面板示例项目
基础上进行修改，只保留一处“默认开启”的折叠面板，和一个测试按钮，希望达到的效果是，点击页面【测试按钮】，执行test方法，通过改变testOpen的值为false，可以将折叠面板收起。实际上并没有起到效果。

// 输出如下：
测试按钮
before this.testOpen is  false  at pages/collapse/collapse.vue:57
after this.testOpen is  false  at pages/collapse/collapse.vue:59

可以看到，this.testOpen 已经是false，但实际上折叠面板并未折起来。
不知使用方式是否存在问题，是否有解决办法，感谢！

附上完整代码

<template>
	<view>
		<uni-section title="基础用法" type="line">
			<uni-collapse ref="collapse" v-model="value" @change="change">
				<uni-collapse-item title="默认开启" :open="testOpen">
					<view class="content">
						<text class="text">{{content}}</text>
					</view>
				</uni-collapse-item>
				
			</uni-collapse>
		</uni-section>
		<button class="button" type="default" @click="test">测试按钮</button>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				value:['0'],
				accordionVal:'1',
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},
				testOpen:false
			}
		},
		methods: {
			add() {
				if (this.content.length > 35) {
					this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
				} else {
					this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
				}
				// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			change(e) {
				console.log(e);
			},
			test() {
				console.log("测试按钮");
				console.log(" before this.testOpen is ", this.testOpen);
				this.testOpen = false;
				console.log(" after this.testOpen is ", this.testOpen);
			}
		}
	}
</script>

<style lang="scss">
	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}
</style>

[mehaotian]

testOpen:false

文档有一句话： 请注意 v-model 属性与 open 属性请勿一起使用 ，建议只使用 v-model ，这两个同时使用大概率会出现冲突

而且你代码只所有不生效 ，是因为你的 testOpen 的值已经是 false ,你还改false ,是不会触发任何事情的，相当于什么都没发生