Gissues: innerHTML set from render function goes missing when patching?

dten

Sep 5th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqVVEtvm0AQ/itTLiSSDYf2hEiapo3Ud6smPZUeCIzDJrBLdwfHkcV/7+wuYJyXWkuWZ+fxzfPzNnjTttG6wyAJUsKmrXPC40wCpJcdkZKwXiqZFLUobo6yoMQajuAF/2TB8XYL9v0awp+SBSQMIYHw3SD2fRp7DI/3VjUto10KWSbs7tGyYFQJKVGzMky7Y9MVFVTU1GncHYecKo1tNOOk8axIfppCi5ZYFk2rNMEWqgX0sNKqgZDbCieLS+/1kUOzXbM5k7hxDiWu8q5mCFttwQ5KoiSTMKaL7RfWUOaUw8Gh9wLQSJ1maXiyHesEVnlt0LkD9PbHxrKQxkO9wSIgUyi5ElfRtVGSp+8QssAmFjXqby0JJU0WcH4PlAV5Xavbj05HuhsTcEyFxc0j+muzsbos+K7RoF5jFkw2yvUVkjefnX/FDcuTsVFlV7P3M8YfaFTd2Rq922knSy575ueq/eCGL+TVhTnbEEozNmULHSdjvXkZdspPtb4r92X00sXxQHmK4yLt+Y63oJ+5BrbZ74OVsw6g1aq1+/avYZfTC4DuWkzgVKkac7nY6TX+6YTGcuhq0HNng+RO+xGkc9I8mSeBJkPvhRFQI9NN+yMcPPiUDMEN3hmmp7u+fQtV+Anv2OZcmLGtvQhJlrC8OFwJieV+CDe/H+IpXj4aIlZwQJUwETvNypr4UR2EpViHs1aZMhY5GfPspmU/v1wE1uGC3dz43l98+cxjsTncG/rDWcTvw2lWgNz9/5Xgp7N4KtEsZJdmvhL3mHPbn9+yydt77PaG/dPmu/QUqoj4/OK4KCWHcfdirSOJFMu2iU/YLdadJNHgslTNCfMgehWXwtBcHaFplpda3TLfGWRGRxvv/gT00h+QJeu/pb0XNk99z/Qg/UTV/i9gFhfh

Steps to reproduce

When you arrive the inner html provided to the Comp's div is visible, when the delete is toggled the innerHTML should end up wrapped in a del element but instead the contents of the div becomes nothing.

A workaround can be demonstrated by setting keys to true in Comp.vue which will assign different keys to the divs which then (i think) forces the elements to not try patch between each other

What is expected?

it to work the same with keys as without since the key is not supposed to be needed

What is actually happening?

element goes missing

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 65.15 GB / 88.39 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

DragonnZhang

Dec 8th 2023

I think the bug is caused by innerHtml rather than key. In this example, there are no keys, but bug still appears. And main logic about this part is in renderer.

edison1105

Dec 11th 2023

a workaround: add a key.

<Comp v-bind:del="del" :key="del"></Comp>

dten

Dec 11th 2023

True. The ticket states a such