I think it is logically wrong when I use v-once with v-for

[wsu-sie-ung]

<h1>My Lucky Toto Number: (Iterate with array - v-once)</h1>
<div v-for="(luckyNumber, index) in myLuckyToto4DNumbers">
  <span v-once>{{index+1}}: {{luckyNumber}}</span>
</div>

const myLuckyToto4DNumbers = [5707, 1171, 2150, 3800, 1771];

below is the rendered result:

At first, I thought it would loop through the array and display each number accordingly. Since it uses v-once, I expected that any future updates would not be reflected on the screen. However, after running it, it displayed the first number five times. What I expected was for it to initially render 5707, 1171, 2150, and 1771, and then ignore any subsequent changes to the array values.

[istiuak-0]

Use v-once on the parent element

<div v-for="(luckyNumber, index) in myLuckyToto4DNumbers" v-once >
  <span>{{index+1}}: {{luckyNumber}}</span>
</div>

On the initial loop, it's also updating that element, changing its inner text content

[wsu-sie-ung]

Below is what chatgpt explained to me, is it 100% correct on my version (v-once in span)

Here’s what Vue does internally:

1. Before rendering, Vue compiles your template into a render function.
2. During the first render:

• The render function runs once for and produces a static VNode (a virtual DOM element).
• This VNode contains literal text content: e.g. "1: 5707".

3. Because of v-once, Vue marks that VNode as static, meaning it will not be re-rendered for subsequent updates.

4. For the rest of the loop iterations, Vue reuses the exact same static VNode, cloning it directly rather than evaluating index or luckyNumber again.

[lychee712]

When using v-once on a v-for container, should we write "key"