v-for adding empty text node at start and at end of the loop.

[thekubilay]

I am not very sure is it on purpose, but this is what happening here.

<template>
     <div ref="container">
         <span v-for="i in 4" :key="i" class="item">i</span>
     </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

onMounted( () => {
    console.log(container.value.childNodes)
})

const container = ref<HTMLElement>()

</script>

in the above example. when you check the log of the childNodes. you see the empty texts are added at start and at end. is it on purpose? or is it bug?

[so11y]

This is normal. The empty nodes at the beginning and end are anchor nodes for the Fragment created by v-for directive. They are used as reference elements when inserting or modifying current child nodes. You can find the related code in this GitHub link