Vue: Use v-for directive to store items without matches in a separate container

Question

Vue: Use v-for directive to store items without matches in a separate container

Currently, I am in the process of creating an application similar to Trello.
My setup involves using a user_list for categories and ticket_list for items within each category.
Each item in the ticket_list is linked to a user's id in the user_list.

One feature I would like to implement is having a static field called UNASSIGNED, where I can move all items from the ticket_list that do not have a corresponding user_id in the user_list.

This is what my code looks like....

<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 current code functions correctly... however, it does not display items with no user id associated.
I am wondering if there is a way to automatically assign these unlinked items to the Unassigned category?

javascript vue.js vuejs2 v-for vuedraggable

Answer 1

Answer №1

To accomplish this task, you can create a computed property.

<span>No Assignments</span>
<div v-for="item in unassigned_items">{{ item }}</div>

Next, add the following code:

computed: {
  unassigned_items: function () {
    return this.task_list.filter(function (task) {
         return task.assignee_id === 0             
    })
  }
}

Answer 2

To accomplish this task, you can create a computed property.

<span>No Assignments</span>
<div v-for="item in unassigned_items">{{ item }}</div>

Next, add the following code:

computed: {
  unassigned_items: function () {
    return this.task_list.filter(function (task) {
         return task.assignee_id === 0             
    })
  }
}

Answer 3

Answer №2

One possible solution is to create a computed property that combines unassigned tickets with an unassigned user and links the tickets with the respective users.

computed: {
    usersWithTicketList () {
        // merge users and tickets into 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 unassigned tickets to a fake user
        users.concat({
            id: -1, // fake user id for unassigned
            // other user info
            tickets: UNASSIGNED
        })

        return users
    }
}

Subsequently, your template would have a structure similar to the following:

<div v-for="user in usersWithTicketList" :key="user.id">
    <div v-for="item in user.tickets" :key="ticket.id">
        <v-card>
            <!-- Since we have linked each ticket to a user including the unassigned category, there is no need for a conditional check here -->
        </vcard>
    </div>
</div>

Answer 4

One possible solution is to create a computed property that combines unassigned tickets with an unassigned user and links the tickets with the respective users.

computed: {
    usersWithTicketList () {
        // merge users and tickets into 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 unassigned tickets to a fake user
        users.concat({
            id: -1, // fake user id for unassigned
            // other user info
            tickets: UNASSIGNED
        })

        return users
    }
}

Subsequently, your template would have a structure similar to the following:

<div v-for="user in usersWithTicketList" :key="user.id">
    <div v-for="item in user.tickets" :key="ticket.id">
        <v-card>
            <!-- Since we have linked each ticket to a user including the unassigned category, there is no need for a conditional check here -->
        </vcard>
    </div>
</div>

Vue: Use v-for directive to store items without matches in a separate container

Answer №1

Answer №2

Similar questions

An alternative method to confirm the checkbox selection without physically clicking on it

The absence of 'let' or 'var' in an ES6 class leads to an undefined variable

Using a v-for to dynamically generate srcset properties

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

Generate Random Messages in a pop-up window using window.alert functionality in Javascript

Incorporate dynamic JavaScript content within an HTML document

I am experiencing difficulties in generating a React application using "create-react-app"

The link containing special characters like % cannot access the api

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

Guide to embedding bootstrap.min.js into ember-bootstrap extension

Attaching a function to the "onselect" event that manages the character limit within an input text field

Issue with Angular 2 pipe causing unexpected undefined result

Comparing global variables in ng-switch: Best practices

"Exploring In-Depth Data Visualization: A Guide to Navigating Charts

Setting up secure HTTPS connections for Node.js and Vue.js

Triggering of NVD3 Angular Directive callback occurring prematurely

Vue verifies the readiness of two computed properties

Looking for guidance on how to initiate or halt React Native Moti animation when the state changes? I've been running into issues where my method appears to disrupt

"Why is it that when using jQuery, the .fail method doesn't accept arguments to deliberately

How can I activate the socket.io connection event in NodeJS?