Vue: v-для хранения несопоставленных предметов в другом контейнере - PullRequest
Новая
       100

Vue: v-для хранения несопоставленных предметов в другом контейнере

0 голосов
/ 28 апреля 2020

Я пытаюсь создать приложение, похожее на trello
В моем случае у меня есть user_list в качестве моих категорий и ticket_list в качестве элементов для каждой категории.
Каждый элемент в ticket_list содержит соответствующий идентификатор пользователя в user_list конечно.

Теперь я хочу иметь поле stati c UNASSIGNED, в которое я могу добавить все элементы в ticket_list, для которых нет user_id в user_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>

Приведенный выше код работает нормально ... и, конечно, он не показывает все элементы, которые не имеют соответствующий идентификатор пользователя.
Теперь можно ли выбросить все эти предметы, которые не принадлежат ни к одной из категорий user_list, в категорию c Unassigned?

Ответы [ 2 ]

4 голосов
/ 28 апреля 2020

Добавление вычисляемого свойства может сделать работу. 

<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             
    })
  }
}
2 голосов
/ 28 апреля 2020

Это может быть хорошим решением для добавления вычисляемого свойства, которое добавляет неназначенные тикеты неназначенному пользователю и связывает тикеты с пользователями в свойстве. 

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