Vue 3: v-once in for loop prints duplicated values-CodePudding

do I do something wrong or is it a bug? I think it is a bug. The following code returns 2 divs with same text: 'test1'. Because of the 'v-once'. Every div should have corresponding string instead.

<script setup>
import { ref } from 'vue'

const testArray = ref([{
id:1,
string: 'test 1'
},{
id:2,
string: 'test 2'
}])
</script>

<template>
    <div v-for="obj in testArray" :key='obj.id'>
        <span v-once>{{obj.string}}</span>
  </div>
</template>

Playground:

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGVzdEFycmF5ID0gcmVmKFt7XG5pZDoxLFxuc3RyaW5nOiAndGVzdCAxJ1xufSx7XG5pZDoyLFxuc3RyaW5nOiAndGVzdCAyJ1xufV0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2IHYtZm9yPVwib2JqIGluIHRlc3RBcnJheVwiIDprZXk9J29iai5pZCc XG4gICAgXHQ8c3BhbiB2LW9uY2U e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

CodePudding user response：

Move your v-once to the div with the v-for on it.

<script setup>
import { ref } from 'vue';

const testArray = ref(
  [
    {
    id:1,
    str: 'test 1'
    },
    {
    id:2,
    str: 'test 2'
        }
  ]
);  
</script>

<template>
    <div v-for="(obj) in testArray" :key='obj.id' v-once>       
        <span >{{obj.str}}</span>
  </div>
</template>

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG5cbmNvbnN0IHRlc3RBcnJheSA9IHJlZihcbiAgW1xuICAgIHtcbiAgICBpZDoxLFxuICAgIHN0cjogJ3Rlc3QgMSdcbiAgICB9LFxuICAgIHtcbiAgICBpZDoyLFxuICAgIHN0cjogJ3Rlc3QgMidcblx0XHR9XG4gIF1cbik7ICBcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU XG5cdDxkaXYgdi1mb3I9XCIob2JqKSBpbiB0ZXN0QXJyYXlcIiA6a2V5PSdvYmouaWQnIHYtb25jZT4gICAgXHRcbiAgICBcdDxzcGFuID57e29iai5zdHJ9fTwvc3Bhbj5cbiAgPC9kaXY XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==

CodePudding user response：

It's rendering two divs because you are looping through an array having two objects. It's rendering a single div (once) for every iteration.

v-once directive is used to render the element only once which means after rendering it will be treated as static element.

If you make any to change testArray, after its rendered, the changes wont be visible on the DOM. I have updated your code, you can check it out in the below link. I am rendering the same text twice, one with v-once and another without it. You can see the one with v-once does not update on button click.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGVzdEFycmF5ID0gcmVmKFt7XG5pZDoxLFxuc3RyaW5nOiAndGVzdCAxJ1xufSx7XG5pZDoyLFxuc3RyaW5nOiAndGVzdCAyJ1xufV0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2IHYtZm9yPVwib2JqIGluIHRlc3RBcnJheVwiIDprZXk9J29iai5pZCc XG4gICAgXHQ8c3BhbiB2LW9uY2U e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gICAgPGJyPlxuICAgIFx0PHNwYW4 e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gIDwvZGl2PlxuICBcbiAgPGJ1dHRvbiBAY2xpY2s9XCJ0ZXN0QXJyYXlbMF0uc3RyaW5nID0gJ1VwZGF0ZWQgVGV4dCdcIj5cbiAgICAgVXBkYXRlXG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=