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

Question

[Daniil161rus]

Есть таблица которая выводит профили (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)
  }
)

Answer 1

[0xD34F]

Не надо никакого watch, фильтрацию выполняйте прямо в computed:

const profilesSorting = computed(() => profiles
  .value
  .filter(n => n.id === filters.value.id)
  .sort(...)
  .slice(...)
);

Comments

[Daniil161rus]

Дело в том, что в дальнейшем будет больше параметров, по которым надо будет делать фильтрацию и под каждый параметр писать свою .filter функцию думаю будет не очень правильно

[0xD34F]

Дело в том, что в дальнейшем будет больше параметров

Вот когда будет, тогда придёте и зададите ещё вопрос. А может и не зададите - попробуйте поиском воспользоваться, на вопросы о том, как организовывать фильтрацию по нескольким параметрам, лично я тут отвечал неоднократно, в том числе и с использованием vue.