vNode API exposed over 'firstChild' through v-for directive
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
Run the reproduction from the link and see the output and the console.
What is expected?
firstChild is a property of an HTML node and should return the same as children[0].
This is working like that in vue2 and in vanilla JS.
What is actually happening?
in vue 3 firstChild from v-for is not returning the first html node child, but likely an internal virtual node object.
System Info
System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Max
Memory: 128.28 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.volta/tools/image/node/16.18.1/bin/node
Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
npm: 8.19.2 - ~/.volta/tools/image/node/16.18.1/bin/npm
Browsers:
Chrome: 118.0.5993.88
Firefox: 118.0.2
Safari: 16.5
npmPackages:
vue: 3.3.4 => 3.3.4
Any additional comments?
No response
The counterpart to children[0] would be firstElementChild, not firstChild - see firest info box on this page: https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild
Yes, Vue uses text Nodes as markers in some places, like here. You only care about the elements, so use APIs that only return elements.
I do not agree with this argumentation, although I understand , that the alternative solution might solve my problem.
I do not understand, why the dom tree gets additional text nodes, if I don't create them in the code explicitly? It otherwise has to be stated explicitly in the vue2 -> vue3 migration guide, because such changes in behaviour break the existing functionality for the projects that migrate.