carousel BUG！！！渲染问题☠️☠️☠️

[986823307]

TuSimple/naive-ui version (版本)

2.34.3

Vue version (Vue 版本)

3.2.47

Browser and its version (浏览器及其版本)

Microsoft Edge 版本 112.0.1722.17 (正式版本) dev (64 位)

System and its version (系统及其版本)

Window 11 专业版 21H2

Node version (Node 版本)

v16.18.0

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/light/components/carousel

Reappearance steps (重现步骤)

轮播卡片自定义，卡片通过for循环遍历渲染，并且数组元素数据和渲染视图同步更新，在carousel内第一个卡片无法更新视图，而后面的卡片都可以更新，触发条件是点击卡片更新元素的字段。carousel外监听实际数据已经改变，但carousel第一个卡片怎么都不进行更新视图

Expected results (期望的结果)

能够跟其他卡片一样达到数据和视图同步

Actual results (实际的结果)

第一个卡片无法更新

Remarks (补充说明)

<div class="choose-carousel-list__item" @click="chooseThisPlan(item)" v-for="(item) in state.productDataList" :key="item.merchantPlanId" > {{checkIncludes(item)}}

{{ item.companyName }}

{{ item.productName }}

{{ item.loanLimit }}

额度范围

{{ item.people }}

当前申请人数

<template #dots="{ total, currentIndex, to }">

<li v-for="index of total" :key="index" :class="{ ['is-active']: currentIndex === index - 1 }" @click="to(index - 1)" />

[comxza]

大佬 这个问题您解决了吗 还是用其他的swiper代替了呢

[XieZongChen]

https://codesandbox.io/s/intelligent-goodall-6yjonz?file=/src/Demo.vue 没有复现，我怀疑是你的数据没有响应式

[comxza]

https://codesandbox.io/s/intelligent-goodall-6yjonz?file=/src/Demo.vue 没有复现，我怀疑你的数据没有响应式

我这边做了个简单的demo 你可以看下 数据源不仅限于pinia 我尝试过ref以及reactive 均不行

https://codesandbox.io/p/sandbox/admiring-fog-mkq852?file=%2Fsrc%2FApp.vue%3A29%2C18

[986823307]

大佬 这个问题您解决了吗 还是用其他的swiper代替了呢

我的解决办法是watch检测更新然后重新渲染第一个卡片就行了

[qq825871092]

我也遇到同样的问题了，第一个卡片内的内容 数据更新了 视图没更新

[mhrmsg]

确实有问题，我的轮播图中通过在每一个div中添加子项，并设置:key=item.cid，当更新轮播图外层div响应式数据cid时，子项并不会更新视图。并且Element中元素会递增

[mhrmsg]

搞好了，没有响应式是我里面用div包裹，应该用n-carousel-item嵌套。我在里面包了video标签和一个div，这里面还有一个问题是video的样式，我设置的宽高是100%,100%，这就导致在过度时间没结束时出现video缺了一块的问题，需要在300ms后重绘一下。

[onlyCK]

有解决方案吗？同样遇到了，数据更新，子组件的第一个视图不更新，用的响应式数据ref

[jahnli]

新版中似乎已经修复