Subscribe on changes!

v-bind with null on slot will crash the app

avatar
Feb 14th 2023

Vue version

v3.3.0-alpha.4

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UstOwzAQ/JXFHAJSY4PKqUqjIi78ARdf0mbbBPyS7YRDlH9n45YqlMLNOzs7Y+94YM/O8b5DtmJF2PnWRQgYO1dK02pnfYQBPO5hhL23GjKiZufWi9XuhHMxFZMStaXZWRMi6HCA9TR+l72iUhberFf1TXYvTSGObuRDRUTtVBWRKoCieSyHIQ2PYyGoSuikn04ynvlwG9uosISG5Em/ED+V0qXoOMPZgh1vn+vK8fdgDT19SLqnRpBsBQmZMHrRVEvWxOjCSojOuI8D31ktNtQTvjOx1ZjXVm+WfMkf8kq5puJPom5DnLc5Bp1vvf0M6MlYssXMQxDYo889mho9+n89L7jXfC8ov7wn61GakdbxHdyVL/B3ShRC3fZpy7TnoGwEU2lcZymQDPp825p6LZnplJKsJCXinFI5Ts5DGb8AxOze2g==

Steps to reproduce

Wait page loading, then we will see an error: Cannot read properties of null (reading 'key')

What is expected?

Do not crash, and point out v-bind should working with an object.

What is actually happening?

Crashed

System Info

No response

Any additional comments?

No response

avatar
Feb 14th 2023

I think it is illegal to pass a null to v-bind, but in order to avoid this kind of error, I think it is still necessary to deal with fixing it. cc @LinusBorg

avatar
Feb 14th 2023

FYI, It's also crash when pass a non-object value. For example, v-bind="1" and v-bind="'aaa'". playground

avatar
Feb 22nd 2023

I think it'd make sense to have a dev warning at runtime if the value passed to v-bind isn't an object.

avatar
Jun 14th 2023

Just to add to this, and maybe it's my misunderstanding of how v-bind works internally, but this example works for an input if I v-bind a null ref (check Comp.vue for implementation). However, if I use it on the commented out slot, I get an error.