Version

3.2.20

Reproduction link

kolaente.dev

Steps to reproduce

The full component is at the link above, but please take a look at the explanation before checking it out.

Assuming a code snippet like this:

        <ul class="pagination-list">
            <template v-for="(p, i) in pages">
                <li :key="`page-${i}`" v-if="p.isEllipsis">
                    <span class="pagination-ellipsis">&hellip;</span>
                </li>
                <li :key="`page-${i}`" v-else>
                    <router-link
                        :aria-label="'Goto page ' + p.number"
                        :class="{ 'is-current': p.number === currentPage }"
                        :to="getRouteForPagination(p.number)"
                        class="pagination-link"
                    >
                        {{ p.number }}
                    </router-link>
                </li>
            </template>
        </ul>

where pages is a computed property that does some calculation to figure out what pages to return. It's always an array, if there are no properties it is an empty array.

What is expected?

Pagination is being rendered correctly and works without issues.

What is actually happening?

Every time pages changed, it would yield a warning in the console:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
[stacktrace omitted)

and an error like this:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'el')

After that, the whole application breaks and nothing works at all with similar errors to that one in the console, only varying in the reading '...' part at the end.

I was able to track it down to the two <li> elements having the same key. If I change them to have different keys, it works fine without issues.

I am pretty sure that using loops like this is not supported and shouldn't be expected to work. It did however work flawlessly in vue 2 (the component is from a migration project). A better error message might be a good idea though, it took me solid two hours to figure out what was going on.

The repro is way too big for us to check it but keys must be unique anyway. Remember to use the chat of forums for questions!

Sure. Since I got an error "This is likely a vue internals bug, please open an issue" I figured I might as well do that.

A better error message, indicating that keys must always be unique, even if only one element with the same key ever exists at the same time would've been helpful. I guess that's a feature request though? Should I open a separate issue for that?