Как создать фильтрацию через select на vue 3 с composition api?

Question

[dupreseraphine]

Есть родительский компонент app.vue, где идет запрос и ответ с бэка, получаю все объекты массива.

В родительском компоненте передаю компоненты СardList и FilterBlock.

В фильтр блоке у меня есть селект, где есть поля all, alive, dead, unknown. при клике на all должны вернуться все объекты массива, а поля alive, dead, unknown фильтруются по статусу. при этом если выбираем по статусу, то в компоненте Card(одна карточка, лежащая в CardList), если alive, то будет span, где будет отображаться зеленый кружок, для dead красный, для unknown желтый.

На all все объекты с разными статусами и соответствующими им кружками, при выборе alive будут отображены, только объекты с этим статусом и зеленым кружком, для dead и unknown такая же фильтрация с соответствующими для них цветом кружка.

Как это реализовать, используя vue3 c composition api?

Comments

[Виктор]

в родительском компоненте передаю компоненты СardList и FilterBlock

а еще можно передавать параметр кружка и функцию по смене этого параметра.

Answer 1

[Rsa97]

Стандартно. FilterBlock через v-model меняет значение фильтра в родительском компоненте, при его изменении пересчитывается computed с отфильтрованным списком, который передаётся параметром CardList.

Answer 2

[0xD34F]

Вот так:

Компонент FilterBlock

const status = defineModel('status');
const statuses = [ 'all', 'alive', 'dead', 'unknown' ];

<select v-model="status">
  <option v-for="n in statuses">{{ n }}</option>
</select>

Компонент СardList

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

<div v-for="n in data">
  <span :class="[ 'status', n.status ]"></span>
  ...
</div>

.status {
  border-radius: 50%;
  width: 30px;
  height: 30px;

  &.alive { background: green; }
  &.dead { background: red; }
  &.unknown { background: orange; }
}

Компонент App

const data = ref([ ... ]);
const status = ref('all');
const filteredData = computed(() => status.value === 'all'
  ? data.value
  : data.value.filter(n => n.status === status.value)
);

<FilterBlock v-model:status="status" />
<CardList :data="filteredData" />