Как подгружать контент в блок принадлежащий элементу цикла?

Question

[Senbonzakuraa]

Вывожу список юзеров и по кнопке подгружаю с сервера заказы принадлежащие им:

<template>
    <div class="userslist mt-5" v-for="(user,n) of users" v-bind:index="n">
        <a href="#">{{user.name}}</a>
        <button @click="getOrders(user.id)" class="btn btn-primary">Orders</button>
        <div class="userlist__orders" v-for="(order,n) of sortOrders">
            <p>{{order.status}}</p>
        </div>
    </div>
</template>

Проблема в том, что после того как данных приходят с сервера, они заполняют все блоки у всех юзеров с классом userlist__orders вместо того чтоб отобразить контент только в одном блоке у определенного юзера. Как указать Vue в какой именно блок выводить информацию?

Answer 1

[0xD34F]

Сохраняйте заказы в объект пользователя:

<button @click="getOrders(user)">Orders</button>
<div v-for="order in user.orders">

async getOrders(user) {
  this.$set(user, 'orders', await fetch ...);
}