how can i use variable declared inline in vue js?

Question

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?

maybe this answer can help you stackoverflow.com/questions/43322217/… — Sombriks
– Sombriks, Commented Jul 27, 2022 at 14:54

Boussadjra Brahim · Accepted Answer · 2022-07-27 14:57:04Z

1

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>

answered Jul 27, 2022 at 14:57

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Kumar Pandey · Accepted Answer · 2022-07-27 14:58:31Z

1

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>

answered Jul 27, 2022 at 14:58

Abhishek Kumar Pandey

4492 gold badges4 silver badges17 bronze badges

Collectives™ on Stack Overflow

how can i use variable declared inline in vue js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related