Vue : v-for store unmatched items to different container

Question

I'm trying to build a trello like application
In my case, I have a user_list as my categories and ticket_list as the items for each categories.
Each item in ticket_list holds a corresponding user's id in user_list ofcourse.

Now what I want to do is to have a static UNASSIGNED field where I can throw all the items in ticket_listthat does not have a corresponding user_id in the user_list.

my code goes like this....

<div class="static_ticket_category">
         <span>Unassigned</span>
    </div>
<div v-for="user in user_list" :key="user_index>
    <div class="ticket_category">
        <span>{{user.name}}</span>
    </div>

    <div class="ticket_items">
        <div v-for="item in ticket_list">
            <draggable .....>
                <template v-if="item.user_id == user.id">
                    <v-card>
                          ...content goes here
                    </v-card>
                </template>
            </draggable>
        </div>
    </div>
</div>

The code above works fine... and of course it does not show all items that doesn't have any corresponding user id.
Now, is it possible to throw all that items that do not belong in any user_list categories into the static Unassigned category?

Answer 1

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>