how can i use variable declared inline in vue js?

I’m working with Vue.js (version 3) and I wanted to do something like this:

<div v-for="item in list" v-if="item.someAttribute === someOtherVariable">

but Vue returns the error:

Property "item" was accessed during render but is not defined on instance

Since, as I suppose, he’s looking for item in data, where I created the Vue app. Is there anyway to solve this issue? Maybe some workaround to obtain the same effect?

Answer

It’s not recommended to use v-if and v-for on the same element due to implicit precedence.

according to the official docs

so you should do :

<template v-for="item in list">
  <div v-if="item">
    ....
  </div>
</template>