tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.

Home Page:https://www.naiveui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

carousel BUG!!!渲染问题

onlyCK opened this issue · comments

Describe the bug

轮播卡片自定义,卡片通过for循环遍历渲染,并且数组元素数据和渲染视图同步更新,在carousel内第一个卡片无法更新视图,而后面的卡片都可以更新,触发条件是点击卡片更新元素的字段。

Steps to reproduce

第一个卡片无法更新

const activityData = ref([])
<n-carousel draggable style="padding: 8vw 0 0" :on-update:current-index="handleCurrentIndexUpdate">
	<div class="activity-item1" v-for="(item, index) in activityData" :key="'activity' + index">
		<activity :data="item.data" :bg="item.bg" @change="changeHandle" />
	</div>
</n-carousel>

Link to minimal reproduction

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

System Info

Apple M1
13.2.1 (22D68)
"naive-ui": "^2.35.0",

Used Package Manager

pnpm

Validations

子组件<n-config-provider class="bg" :theme="darkTheme"> <div class="main"> <template v-for="(item, index) in data" :key="index"> <div class="num">{{ item.num }}</div> </template> </div> </n-config-provider>

问题代码 <n-carousel draggable :on-update:current-index="handleCurrentIndexUpdate"> <div class="item" v-for="(item, index) in dataArr" :key="'index"> <children :data="item.data" @change="changeHandle" /> </div> </n-carousel> 更改dataArr的值 ,第一个组件的视图不会更新

提供的复现 最小可复现的示例

可提供的代码片段