@Daniil161rus

Как обновить computed свойство profilesSorting с помощью watch?

Есть таблица которая выводит профили (profilesSorting), как сделать чтобы при изменении filters.id в AppInput, в таблицу попадали только те профили у которых id совпадает с указанным

<div class="profile-filters">
    <h3 class="font-medium text-gray-500">Фильтры:</h3>
    <div class="filters mt-5">
        <AppInput label="ID" name="id" placeholder="Введите id профиля" v-model:value="filters.id" />
    </div>
</div>
<AppTable
        :head="tableHeads"
        :columnTemplates="tableSizeColumns"
        @sorting="setSort"
        :length="profilesSorting.length"
        :data="profilesSorting"
>


const filters = ref({
  id: null
})

const profiles = computed(() => profileStore.getProfileList)

const profilesSorting = computed(() => {
  return profiles.value
    .sort((a: any, b: any) => {
      let modifier = 1
      if (typeSort.value === 'desc') modifier = -1
      if (a[sortField.value] < b[sortField.value]) return -1 * modifier
      if (a[sortField.value] > b[sortField.value]) return 1 * modifier
      return 0
    })
    .slice(paginationOffset.value, paginationItemsPerPage * page.value)
})

// log выводит правильно, но таблица не меняется
watch(
  () => [filters.value.id],
  () => {
    console.log(
      'New array: ',
      profilesSorting.value.filter(item => item.id == filters.value.id)
    )
    profilesSorting.value.filter(item => item.id == filters.value.id)
  }
)
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не надо никакого watch, фильтрацию выполняйте прямо в computed:

const profilesSorting = computed(() => profiles
  .value
  .filter(n => n.id === filters.value.id)
  .sort(...)
  .slice(...)
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы