Vue：v-for 将不匹配的项目存储到不同的容器

Question

我正在尝试构建一个类似 trello 的应用程序
就我而言，我有一个 user_list 作为我的类别，ticket_list 作为每个类别的项目。
ticket_list 中的每个项目在user_list 当然都包含一个相应的用户ID。

现在我想做的是有一个静态的UNASSIGNED 字段，我可以将ticket_list 中的所有项目扔到user_list 中没有相应的user_id。

我的代码是这样的......

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

上面的代码可以正常工作...当然它不会显示所有没有相应用户 ID 的项目。
现在，是否可以将所有不属于任何user_list 类别的项目都扔到静态Unassigned 类别中？

Answer 1

添加计算属性可以完成这项工作。

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

然后在代码中：

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

Answer 2

添加一个计算属性可能是一个很好的解决方案，它将未分配的票证添加到未分配的用户并将票证与属性中的用户链接。

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

那么你的模板应该是这样的

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