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

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