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?
It's not recommended to use
v-if
andv-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>
You can not access v-for and v-if in the same line, if you do so Priority has been given to your v-if
condition, this was the reason you are getting that error
<div v-for="item in list">
<span v-if="item.someAttribute === someOtherVariable">...</span>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.