VueJs - How to use variable in v-if?

Question

I am a newbie of VueJs How to use a variable in v-if??

My js file

data: {
    member: [
      {
        id:"1",
        Firstname: "Peter",
        Lastname: "Super"
      },
      {
        id:"2",
        Firstname: "Roger",
        Lastname: "Power",
      }

My Html file

then I want to code like this.

<li v-for="member in members" v-if="members.Firstname === 'Peter'">
   //display data about id 1 Peter Super
</li>

but Is it possible to use a variable in v-if such as

<script>
var name = 'Peter';
</script>
<li v-for="member in members" v-if="members.Firstname === name">
   //display data about id 1 Peter Super
</li>

Thank you very much

You access an array by index like members[0].Firstname.

Dan
– Dan

2021-01-11 08:35:05 +00:00
Commented Jan 11, 2021 at 8:35 — Dan
– Dan, Commented Jan 11, 2021 at 8:35

tony19 · Accepted Answer · 2022-07-15 01:28:52Z

3

You need to add key param also. More here: https://v2.vuejs.org/v2/guide/list.html

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item:

Also the issue was in the v-if that you were using members instead of member

Try the below pls:

<li v-for="member in members" :key="member.id" v-if="member.Firstname === 'Peter'">
   //it will display id 1 Peter Super
</li>

edited Jul 15, 2022 at 1:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 11, 2021 at 8:50

LastM4N

2,2502 gold badges19 silver badges24 bronze badges

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

Comments

Mahir Altınkaya · Accepted Answer · 2021-01-11 08:52:04Z

0

The line below lists records whose name is Peter only.

<li v-for="member in members.find(item=>item.name == 'Peter')" >
   //display data about id 1 Peter Super
</li>

answered Jan 11, 2021 at 8:52

Mahir Altınkaya

4396 silver badges17 bronze badges

Comments

Boussadjra Brahim · Accepted Answer · 2021-01-11 08:50:40Z

-1

Add that name to your data object then use find method inside the template to check if the name is existing :

data: {
   name:'Peter',
    members: [
      {
        id:"1",
        Firstname: "Peter",
        Lastname: "Super"
      },
      {
        id:"2",
        Firstname: "Roger",
        Lastname: "Power",
      }

template

<li v-if="members.find(member=>member.Firstname === name)">
   //display data about id 1 Peter Super
</li>

edited Jan 11, 2021 at 8:50

answered Jan 11, 2021 at 8:39

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

VueJs - How to use variable in v-if?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related