"Unhandled error during execution of render function" when decreasing an array size

[Muntaner]

Vue version

^3.4.21

Link to minimal reproduction

https://codesandbox.io/p/sandbox/fervent-water-v6qx3m

Steps to reproduce

1. Render an array as a list of entries. Each entry of such array contains a numeric value.
2. Each entry is rendered via two v-fors, using the entry numeric value and an upperbound (check code for details).
3. When the entry numeric value is decreased and the list is re-rendered, two warnings followed by an error are raised by the application. One of the warnings suggests to report the issue.

To reproduce the issue in the provided CodeSandbox, try to decrease the value by using the "Select array size" form control (defaults to 15, has options for 10 and 5).

What is expected?

No warnings/errors are raised. List is rendered correctly.

What is actually happening?

Two warnings are reported by Vue (one of which recommends reporting the issue on GitHub), followed by an error.

System Info

Tested and reproduced in Chrome on both Windows 11 and Fedora Workstation (39) x64

Any additional comments?

The issue seems to be behaving differently by using CodeSandbox and Vue SFC Playground.

In Vue SFC Playground, the same code gives no warnings, but only raises the error - this is why I'm using CodeSandbox as minimal reproduction link. Instead, CodeSandbox reports all of the three issues (two warnings + one error), which is the same experience I'm getting in the local project on my PC.

I was thinking there may be a mistake related to array lengths - but as far as I've seen, array lengths are always > 0 in the sample provided code.

Vue SFC Playground link (same code as CodeSandbox): link

[skirtles-code]

The underlying problem is that the @change listener isn't triggered soon enough. v-model updates the data and the component re-renders before onChangeEntrySize is called. This leads to the re-render failing, because entrySize - entry.number is a negative number.

I've put together a shorter example to illustrate the timing:

• Playground

You may want to use a watcher on entrySize instead of a @change listener.

[Muntaner]

Thanks @skirtles-code , that's clear. I was suspecting there was some moment where entrySize - entry.number is a negative number, but wasn't able to actually evidence it.

Can this be considered a Vue bug or is it actually a coding mistake?

[yyx990803]

I don't think this is something we can fix in Vue. Essentially you have two different source for entrySize: one controlled by v-model and one emitted from change event listener. To ensure consistency, it's better to use Vue APIs to react to reactive state changes instead of raw DOM events.

Working example using watch: SFC playground