v-for over a non reactive object with conditional directive v-if??

[pragyan-shaw03]

I am traversing over a non reactive set of data where each object contains a boolean variable 'display' that tells if the item should be displayed or not. what if I write v-if='obj.display' with the for directive. I tried but it is not working.
i tried v-show and that was working fine. I know the difference in DOM changes of v-if and v-show but can't understand the difference in such scenarios. Please let me know and I am happy to get some advice as I am starting my journey learning vue.
src code:
`

<title>Document</title>

{{item.name}}

<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script> <script> Vue.createApp({ data() { return { names: [ { name: 'pragyan', disp: true }, { name: 'aman', disp:true } ] } }, }).mount('#app'); </script> `

[Hiws]

That's because v-if runs before the v-for. So it doesn't have access to the content of the loop.

You can read about it here.
I'd recommend using a computed property instead to filter out the items that shouldn't be displayed.

[s3xysteak]

See the playground

As Hiws said, it is recommended to use v-if and v-for in different dom. If you do not want to influence dom structure for that, use <template>.

[czelsa]

there are three things you need to remember here:

• v-if is processed before v-for, which can lead to issues when trying to conditionally render looped items - there is no access to elements in the loop
• v-show works because it toggles the CSS display property without removing elements from the DOM - that's why it will work
• Using a computed property to filter items before rendering is a clean and efficient solution.