We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
3.4.23
https://stackblitz.com/~/github.com/KazariEX/vue-inconsistent-v-html
undefined
null
首次进入主页时(SSR),没有 undefined 和 null
首次进入主页时(SSR),v-html 将 undefined 和 null 作为字符串渲染在了 innerHTML 中
v-html
innerHTML
System: OS: Windows 10 10.0.19045 CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz Memory: 4.11 GB / 15.87 GB Binaries: Node: 21.7.1 - D:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - D:\Program Files\node\node_global\yarn.CMD npm: 10.5.0 - D:\Program Files\nodejs\npm.CMD pnpm: 9.0.1 - D:\Program Files\node\node_global\pnpm.CMD Browsers: Edge: Chromium (123.0.2420.97) Internet Explorer: 11.0.19041.3636
v-html 的值在 SSR 时会将原始值直接放入插值语法中,这会触发 String 类型的隐式转换;而对 DOM 元素设置 innerHTML 时,null 值会被处理为空字符串,两者表现并不一致;在 CSR 时,undefined 值会被处理为空字符串,而 innerHTML 的原生效果是转换为字符串后输出——文档中的 “更新元素的 innerHTML” 并不准确。
同理,v-text 在渲染 null 值时也有同样的问题,Vue 的文本插值语法与 textContent 并不等价。
v-text
textContent
The text was updated successfully, but these errors were encountered:
1ff4076
fix(compiler-ssr): fix v-html SSR for nullish values
8bbf6f7
close vuejs#10725
No branches or pull requests
Vue version
3.4.23
Link to minimal reproduction
https://stackblitz.com/~/github.com/KazariEX/vue-inconsistent-v-html
Steps to reproduce
undefined
和null
undefined
和null
消失What is expected?
首次进入主页时(SSR),没有
undefined
和null
What is actually happening?
首次进入主页时(SSR),
v-html
将undefined
和null
作为字符串渲染在了innerHTML
中System Info
Any additional comments?
v-html
的值在 SSR 时会将原始值直接放入插值语法中,这会触发 String 类型的隐式转换;而对 DOM 元素设置innerHTML
时,null
值会被处理为空字符串,两者表现并不一致;在 CSR 时,undefined
值会被处理为空字符串,而innerHTML
的原生效果是转换为字符串后输出——文档中的 “更新元素的 innerHTML” 并不准确。同理,
v-text
在渲染null
值时也有同样的问题,Vue 的文本插值语法与textContent
并不等价。The text was updated successfully, but these errors were encountered: