[Vuejs]-VueJs – How to use variable in v-if?

by

-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>

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>

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>

Leave a comment