-
-
Notifications
You must be signed in to change notification settings - Fork 14.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(components): [carousel] Watch items causing state loss(#13010) #13011
Conversation
👋 @SaberA1ter, seems like this is your first time contribution to element-plus.
|
Hello @SaberA1ter, thank you for contributing to element-plus, please see our guideline to see how to make contribution |
🧪 Playground Preview: https://element-plus.run/?pr=13011 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
…us#13010) (element-plus#13011) * fix(components): [carousel] Watch items causing state loss(element-plus#13010) * perf(components): [carousel] Using the third parameter of watch(element-plus#13010) --------- Co-authored-by: ZZQChongYa <zhengziqiang@star-net.cn>
Please make sure these boxes are checked before submitting your PR, thank you!
dev
branch.Description
在 carousel 中,
carousel-item 在 onMounted 中向 carousel 中的 items 添加自己,
carousel 添加 watch 去监听 items 变化,每当变化时都会执行
setActiveItem(props.initialIndex)
重置当前播放状态activeIndex
。这个流程在实际执行中存在问题,他的执行顺序为:
carousel-item onMounted -> 上层 onMounted -> watch items(置为默认状态)
这就导致 issue 中翻页失效问题,因为在 watch 中原本应该已经翻页的页数又被重置为 initialIndex。
我将 watch(items) 放在 carousel onMounted 中,但由于 items 的修改在 carousel-item onMounted 又会被触发,所以需要手动设置
activeIndex
。最终代码执行顺序:
carousel-item onMounted -> carousel onMounted(置为默认状态) -> 上层 onMounted -> watch items(如果存在变化的话)
Related Issue
Fixes #13010 .
Explanation of Changes
🤖 Generated by Copilot at 0f31682
watch
effect foritems.value
insideonMounted
hook and callingsetActiveItem
(link)