Как отфильтровать массив и обновить на фронте основе отфильтрованного через v-for в script setup?

Question

Функция sortByDate фильтрует массив на основе которого рендерятся данные. Как теперь обновить отрисованный список на фронте чтобы соответствовал отфильтрованному?

<template>  
    <div class="transactions__list">
          <div
            v-for="(transaction, index) in transactions"
            :key="index"
            class="transactions__item flex items-center justify-between border-t border-solid border-[#e6e6e6] py-4"
          >
            <div class="transactions__item-name flex w-1/6 items-center">
              <img class="mr-2" :src="transaction.icon" alt="" />
              <span class="text-sm 2xl:text-base">{{ transaction.label }}</span>
            </div>
            <div class="transactions__item-dateTime flex w-1/6 justify-center">
              <div>
                <p class="text-sm 2xl:text-base">{{ transaction.date }}</p>
                <p class="text-sm text-[#8A8A8A] 2xl:text-base">{{ transaction.time }}</p>
              </div>
            </div>
            <div class="transactions__item-sum w-1/6 text-center" :class="`text-[${transaction.sumColor}]`">
              {{ transaction.sum }}
            </div>
            <div class="transactions__item-currency w-1/6 text-center">{{ transaction.currency }}</div>
            <div class="transactions__item-paySystem flex w-1/6 justify-center">
              <img :src="transaction.paySystem" alt="" />
            </div>
            <div
              class="transactions__item-status w-1/6 text-right text-sm 2xl:text-base"
              :class="`text-[${transaction.statusColor}]`"
            >
              {{ transaction.status }}
            </div>
          </div>
        </div>
</template>
    <script setup>
import OperationsDropdown from '@/components/dropdowns/OperationsDropdown.vue';
import BaseDatepicker from '@/components/BaseDatepicker.vue';
import { useAppStore } from '@/store/app';
import { computed, ref } from 'vue';
const $app = useAppStore();

let transactions = ref($app.transactions);

function sortByDate(range) {
  computed(() => {
    transactions.filter((object) => {
      let date = new Date(
        `${object.date.toString().split('.')[2]}-${object.date.toString().split('.')[1]}-${
          object.date.toString().split('.')[0]
        } ${object.time}`
      );
      return date <= range.start && date >= range.end;
    });
    return transactions;
  });
}
</script>

<style lang="scss" scoped></style>

Answer 1

Суть vue в том, что он сам понимает когда нужно перерендерить элементы и вам нужно думать лишь о данных, а не как их перерисовать. А вот key в списке v-for как раз и нужен для того, чтоб vue понимал где какой элемент и мог их поменять местами и т.д. и т.п. У вас key равен индексу элемента, если поменять два элемента местами, индексы останутся на своих местах, а значит, что vue все еще будет думать, что вы ничего не сортировали и не меняли. Задайайте key уникальный ключ, чтоб он понимал, когда нужно перерендерить список.

БЛОГ НА HUSL

Как отфильтровать массив и обновить на фронте основе отфильтрованного через v-for в script setup?

Ответы (1 шт):