Version

3.1.1

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XG4gICAgPGRpdiB2LWZvcj1cIihrKSBpbiBPYmplY3Qua2V5cyh2bSlcIiA6a2V5PVwia1wiPlxuICAgICAgPGxhYmVsIDpyZWY9XCJlbCA9PiB2bVtrXS5lbCA9IGVsXCI+e3sgdm1ba10uYmFyIH19PC9sYWJlbD5cbiAgICBcbiAgICAgIDxidXR0b24gQGNsaWNrPVwiKCkgPT4gKGRlbGV0ZSB2bVtrXSlcIj5cbiAgICAgICAgZGVsZXRlIHt7IGsgfX1cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyByZWFjdGl2ZSB9IGZyb20gJ3Z1ZSc7XG4gIFxuY29uc3Qgdm0gPSByZWFjdGl2ZSh7XG5cdGZvbzogeyBiYXI6IDEsIGVsOiB1bmRlZmluZWQgfVxufSk7XG48L3NjcmlwdD4ifQ==

Steps to reproduce

1. Create a v-for structure against an array
2. Create a child element within this v-for
3. You will find that I can render normally
4. Delete certain item from the v-for source

For demonstration in playground: You will find that the page has been rendered successfully at first. Press "Clear" to see error message.

What is expected?

Suppose the specific child will no longer exist and will not render

What is actually happening?

The child still exists and therefore the handler in :ref throw exception

When I clicked "delete foo", suppose "foo" is no longer exists in vm, how come v-for children are still rendering?

I think this is a duplicated of https://github.com/vuejs/vue-next/issues/3557

I think this is a duplicate of #3557

Sorry I don't understand, so the key is that I need to check for el is null or undefined at first before assigning el into variable? Or I cannot use object instead of array to store el?

you need to check that vm[k] exists before you try to assign to its member .el

<label :ref="el => vm[k] ? vm[k].el = el : null">{{ vm[k].bar }}</label>

as you can see the ref method can be called in various states, including where the element is removed and the call is with a null.

You need to check el: https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for