页面如下： ``` <div class="lp-ca-item" v-for="(item, index) in kpCaseList" v-bind:key="index"> <div class="lp-ca-title">{{ index + 1 }}、{{ item.name }}</div> <div class="lp-ca-operate"> <div class="green-but" v-bind:class="{ 'green-but-focus': item.isCasePreview }" @click.stop="toCasePreview(item, item.id)">预览</div> </div> </div> ``` ### 方法一：直接修改数组（推荐） ``` const aiCasePreviewRef = ref() const toCasePreview = (_item: any, _caseId: any) => { // 遍历所有项，将非当前项的 isCasePreview 设为 false kpCaseList.value.forEach((item) => { if(item!=_item){ item.isCasePreview=false } }) if (_item.isCasePreview) { // 如果已经是预览了就关闭预览 _item.isCasePreview = false aiCasePreviewRef.value.closeCasePreview() } else { _item.isCasePreview = true aiCasePreviewRef.value.toCasePreview(_caseId) } } ``` ### 方法二：使用响应式更新（更安全） 如果担心直接修改数组的问题，可以使用 kpCaseList.value = [...] 的方式触发响应式更新： ``` const toCasePreview = (_item: any, _caseId: any) => { kpCaseList.value = kpCaseList.value.map(item => ({ ...item, isCasePreview: //...这里边写改变逻辑 })); // ...... } ```