Display data object based on condition in for loop using Vue.js

Question

I have an array of objects,I would like to display data based on some condition.If the user id matches with data id display name,age for that id.Also is it possible create single divs and display multiple div by looping instead of defining it 3 times for 3 different id.

              <div class="content" v-for="person in persons>
              <div v-for="user in users"
              :key="user.id">
                  <div v-if="user.seqId == person.id" >
                   {{person.name}}          
                  </div>
                <div v-if="user.seqId == person.id">
                   {{person.name}} 
                  </div>
                </div>
                <div v-if="user.seqId == person.id">
                   {{person.name}}  
                  </div>
                </div>
                </div>

            const persons= [
                {
                   name: 'Adam',
                   age:20,
                   id: 1,
                },
                   {
                   name: 'Paul',
                    age:20,
                    id: 2,
                },
                {
                  name: 'James',
                  age:20,
                  id: 3,
                 },
                 ]
              data() {
                return {
                  persons,
                  };
                  }

if user.seqId equal to 1 then frist item from array should display.Name should be Adam .If the user.seqId is 2 ,2nd item from array should display.Name should be Paul .user.seqId should match id from Data section and display name according to that — user2410266
– user2410266, Commented Nov 21, 2019 at 1:15

Carol Skelly · Accepted Answer · 2019-11-21 01:18:39Z

2

Create a computed property to merge the matches into a single array..

computed: {
    matchingUsers() {
        // find persons that exist in users by
        // matching p.id == u.seqId
        return persons.filter(p=>{
            return users.find(u=>u.seqId===p.id)
        })
    }
}

Then iterate the single array...

<div class="content" v-for="(person,i) in matchingUsers" :key="i">
    {{person.name}} - {{person.age}}
</div>

Codeply demo

answered Nov 21, 2019 at 1:18

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

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

2 Comments

user2410266 Over a year ago

I have one more question.What about if the Person is defined as Prop and getting data from another vue.

Carol Skelly Over a year ago

Will you please mark this answer as accepted? do you mean Persons (not Person) is via prop?

Collectives™ on Stack Overflow

Display data object based on condition in for loop using Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related