Как подставить новый массив в таблицу?

Question

[Andre548]

Добрый день! Как можно подставить, массив в таблицу, в зависимости от выбранного статуса?
В консоли получаю нужные данные, а как и вывести не пойму, отображается исходный массив.

<th scope="col" class="px-6 py-3">Status</th>
                                <select
                                    @change="handleStatus"
                                    v-model="statusSelected"
                                >
                                    <option value="accepted">
                                        Zaakceptowane
                                    </option>
                                    <option value="not verified">
                                        Nie Zweryfikowane
                                    </option>
                                    <option value="declined">
                                        Declined
                                    </option>
                                </select>
                                <th scope="col" class="px-6 py-3">Akcje</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr v-for="person in data" :key="person.id ">
                                <td
                                    class="px-2 py-4 lg:py-6 lg:px-4 text-xs md:text-base dark:bg-gray-800"
                                >
                                    <div class="flex items-center">
                                        <div
                                            class="h-10 w-10 flex dark:text-white items-center"
                                        >
                                            <IconUser
                                                class="h-8 w-8 rounded-full"
                                            />
                                        </div>
                                        <div class="ml-4">
                                            <div
                                                class="font-medium dark:text-gray-200"
                                            >
                                                {{ person.full_name }}
                                            </div>

Отображается исходный массив

В консоли нужные данные получаю

Answer 1

[Михаил Храмцов]

Вам необходимо на основе значения statusSelected выбирать какие айтемы рендерить с помощью компьютед метода. Что-то вроде:

const data = [...Ваш массив данных...];
const renderDataByStatus = computed(() = > {
    return statusSelected === 'accepted' ? data.filter((dataItem) => dataItem.status === statusSelected) :
               statusSelected === 'declined' ? data.filter((dataItem) => dataItem.status === statusSelected) :
               data;
})

И проходиться в шаблоне уже по компьютед массиву, то есть person in renderDataByStatus