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>

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

Vue : v-for store unmatched items to different container

javascript

vue.js

vuejs2

v-for

vuedraggable