[Vuejs]-Vue : v-for store unmatched items to different container

by

2👍

✅

It could be a good solution to add a computed property which adds the unassigned tickets to an unassigned user and links the tickets with the users in the property.

computed: {
    usersWithTicketList () {
        // put users & tickets together in one object
        let users = this.user_list.map(user => {
            let tickets = this.ticket_list.filter(ticket => ticket.user_id === user.id)
            return {...user, tickets}
        })

        // add unnassigned tickets to a fake user
        users.concat({
            id: -1, // fake user id for unnassigned
            // other user info
            tickets: UNNASSIGNED
        })

        return users
    }
}

Then your template would look something like this

<div v-for="user in usersWithTicketList" :key="user.id">
    <div v-for="item in user.tickets" :key="ticket.id">
        <v-card>
            <!-- we already know this ticket is linked to this user and UNNASSIGNED is in the user list -->
            <!-- thus you don't need a v-if here AND your unnassigned category is taken care of -->
        </vcard>
    </div>
</div>
👤Shawn Pacarar

3👍

Adding a computed property could do the job.

<span>Unassigned</span>
<div v-for="n in unassigned_items">{{ n }}</div>

And then in the code:

computed: {
  unassigned_items: function () {
    return this.ticket_list.filter(function (item) {
         return item.user_id === 0             
    })
  }
}
👤Lowry

Leave a comment