0

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

现在我想做的是有一个静态字段UNASSIGNED，我可以将所有在.ticket_listuser_iduser_list

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

<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类别中？

4

2 回答 2

3

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

<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             
    })
  }
}
于 2020-04-28T16:52:18.560 回答
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>
于 2020-04-28T17:08:19.687 回答