v-for loop on template with undefined keys on the child element

[BobLuursema]

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNq9GNtu2zb0V1i9NAEiOcnWYdOSYEM3YBuKDdgG7CHOAy3RFhuKFEjKl6X+9x1KokjKkuO0XV9s8tzvpPgU/VhVybomURrdqEzSSt/NOdlWQmqUkyWumUZPc45QjjU+O2/XCEmia8ntDiFFsMyKv4ksU8Rrxi4sohBrIkn+FmuyEnI3wGYtmBKVovteGELzqHqcRyn6uqc0MI5LYqDz6Jc/51GAwlXFKEijgitD4gtz4q7feEyhxH/IQlENmwFFLdmIQINhlDdC51GhdaXS2YxscVkxkmSinA0EDcwXZnVAUAkwATwwRFeH2DEX9g/edn/hEhLwfDPpNmT/y7j8K9dEcsw+1u3QhaGnn2jcz9uTjLueMO67b4/kxG365d787ZsNmFbVmuSp9WdJGdhC8p+g3VK0rHlmtCPXeQgxAq0JaHSLfvvrj9+TCktFzpql0pLyFV3uznRBVeLa6/zcctMlapGuZdHt7S04M4/Qhw9oDGd61jPAEzJob/RqjLofF8bqpPXwLEO3dyhLTBIaHWPieqO7mAXC7h/6wNrFqEmtQZbEt6TEVWuGZ2uW+KMEmEOAtR6CH7D1gnHjUaLFO7Eh8i2GzJwnlGeszokaBj4k87311p3grPe2w7UFZH7338/5zayf3rDRBAofAgA7hG5yum4WsCwIzonsdmZ/dfcO+kbdzGDVQymHokTruBQ5YbfzyFkMNQKCM1IIBnJ6FID1riKw12SrYUdzHzez6meBfmMYyhhWCohN+8LYcUb4SFfIHkVL4+cgtfRPrxVhJIPGep3aQ2bnam1QInuofU/KOl4K45rlQxSi7xng0/5QiloRIw4YDisvUB1ypo9k5ylJaO7j756eBnbv9zczl0gTy2A3Eq1dGCtbE6P++WMnYBtj9BrCi80uaJSBkM7CdUyXoYDEnDYJI3yliyY3V1Av1hGgQwoGGoPY2YD5vCZmAzWgCA8hMBjwgvKcbIH/OkxD1/VeER6mqktYIcmY8feXD0l79gx5TBJ96j6PeBibIJdBvAhTxI/HSwJRXI84NmlUcX0o4dCsqQi7toGYmKoYhmkspM8nxoUdZEyE2esmQxQ2kp8Lg53MwUQWDmA3s2C4TgJ9Tre2q4ABtkrvWMubSiG6KzdCcVxiyuNMMCFhkAnJl8wcGAtWExj6LcliZQk2BVxhG3hzJMJJ0w5BK26Bs8eVFDXPLccayzMn4byTGSCdBefoFS3NlwHm2mlpR/pzKjwpnZIK5zn0Ntz5SNmBcqogJvCRsGRk28Ewoyseg18lfCMs4KCEIvB8LK6s5hLLFeUpuuwY230s6arQcHfrlUzEqjl/rKxnDTHwWGksvUB0IrxblxW3obkuwFFnxOlhsm5dyZ7ZRc7BFkJCFmKJc1qDfT1myjIzXWzKGlYIUbVFSjCaT1TFlArPoMvkjYMeLbEuOwuhtYBvxoBxKbiOFf2XgBIHP+JJguGWvCafq8wn1e1eXuVHDTghoh5spBJe1jAQWVO2G4krqH/4PeJo0p67aXOnuZjGL0VWq3hD4WbbPwecFv8T9CJ8qmZsdX9ETs295f/uhX44Ha/nzpg754+5T8c5gdHfHKXwfiJcNv0+uT6p8Y4ohdvCxCQN9HwVtumGtPOVC1li9rxj3twZK94XFKiTd1KwbGavXpbZIIvP5faTc9D5M911PlHTAJ975sF3ZHMViS6i9qwHoip5rwSHF8JG17xDNG9EnfZ5BE+I4eOLWmbmXfG9SoRczWCVyJprCt/GRJXxQoqNIhIE928ujYwZAMH1WBK4FUoij8kckB7I7TzaR/v/AHDwYW0=

Steps to reproduce

Have a mouse. Open the SFC Playground link, hover over the "HR" category on the left so that it highlights. Then go to the search input field and type the letter "a". Observe the error message in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'el')
    at patchBlockChildren (vue.runtime.esm-browser.js:6743:22)

What is expected?

I expect that the list of links on the right is filtered based on the input of the search field. So in this case I except the "Website" link to disappear and to only see the "App" links.

What is actually happening?

An error is logged and the "Website" link gets renamed to "App".

System Info

No response

Any additional comments?

While making the minimal reproduction I noticed that when I delete the v-if div from line 76 to 82 (and remove the corresponding v-else on the div that remains) the compiler throw an error: <template v-for> key should be placed on the <template> tag. Applying that fix solves the problem, also on the code where the v-if still exists.

That compiler error matches with what is written in the documentation: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key, which seems to imply that a v-if on the child of a template confuses the compiler such that it doesn't throw the error?

Alternatively, if putting the key on the child of a template is allowed, then something goes wrong in the runtime when updating the elements if all of the keys are undefined. I just migrated from Vue 2 to Vue 3, somewhere already before the migration the id fields of "categories" and "applications" were renamed in the backend to pk but I never updated the frontend. This id field is used as the key for some v-for loops. The error disappears when you replace .id with .pk on lines 76 and 83.

Interestingly when applying the previous fix of putting the key on the template but keeping .id instead of .pk the application also does not throw an error.

Note that the error doesn't trigger on all actions. If you search without first highlighting the category it will not trigger. Also if you do highlight, but then type "w" the error doesn't trigger. It seems as though there needs to be an existing list of DOM elements, and the new DOM list should not contain the first element of the existing list. Or something along those lines.

[V1ctorW1ll1an]

You are using application.id but in your application object there is no such property, maybe you should use application.pk

[BobLuursema]

You are using application.id but in your application object there is no such property, maybe you should use application.pk

I know, read the "additional comments" in my post, the rabbit hole is a bit deeper ;-)

[edison1105]

The root cause is that v-if and v-else-if use the same key. There is no need to set a key on v-if or v-else-if since it will be auto-generated by default.