Skip to content
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

[Bug Report] 使用渲染函数 h 渲染 Feild 组件时,label 属性突变为空数据将不会更新UI。 #11368

Closed
yanyuku opened this issue Dec 9, 2022 · 1 comment · Fixed by #11373
Labels
Milestone

Comments

@yanyuku
Copy link

yanyuku commented Dec 9, 2022

重现链接

https://codesandbox.io/s/vant-3-issue-template-forked-vkteu4

Vant 版本

4.0.2

描述一下你遇到的问题。

动态渲染 Field.label 属性时,label突变为空数据时,不触发label属性更新。

重现步骤

  1. 定义一个响应式数据,并设置一个默认值。
  2. 使用 h 渲染一个 Field 组件,并绑定 步骤1变量 至 label 属性。
  3. 删除 步骤1 定义变量内容。

设备/浏览器

Edge

@yanyuku yanyuku changed the title [Bug Report] 请在此填写标题 [Bug Report] 动态渲染 Feild.label 属性问题 Dec 9, 2022
@yanyuku yanyuku changed the title [Bug Report] 动态渲染 Feild.label 属性问题 [Bug Report] 使用渲染函数 h 渲染 Feild 组件时,label 属性突变为空数据将不会更新UI。 Dec 9, 2022
@chenjiahan chenjiahan added this to the 4.0.3 milestone Dec 10, 2022
@haiweilian
Copy link
Contributor

haiweilian commented Dec 10, 2022

@chenjiahan

我今天看到这个问题想尝试修复下,发现是插槽获取不到最新的问题,所以就感到很好奇深入研究了下。发现是 vue 插槽更新策略的问题 https://github.com/vuejs/core/blob/main/packages/runtime-core/src/componentSlots.ts#L207
如果值是 null / undefinedin 检测也会存在所以不会删除。有更改此行为的 pr 但没有任何回复。

所以这个不是这单个组件的问题,当然要在特定的用例下才会复现所以这并不常见,我复现了一个 https://codesandbox.io/s/vant-3-issue-template-forked-mzx0b6?file=/src/App.vue 用例。

所以要解决此类问题需要在使用 v-slots={{ a: () => <Cell>, b: null, c: undefined }} 命名接收插槽地方去排除 null / undefined 即可修复。我看到你已经通过判断内容修复了此问题,是否考虑应从根源解决和全部修复。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants