Для реализации данного функционала в Vue 3 с использованием композиционного API мы можем создать композицию, которая будет отвечать за фильтрацию объектов по статусу. Для начала создадим композицию `useFilter`, которая будет содержать логику фильтрации:
```javascript
import { ref, computed } from 'vue';
export function useFilter(data) {
const selectedStatus = ref('all');
const filteredData = computed(() => {
if (selectedStatus.value === 'all') {
return data;
} else {
return data.filter(item => item.status === selectedStatus.value);
}
});
return { selectedStatus, filteredData };
}
```
Затем создадим компонент `CardList`, который будет отображать объекты с круглыми метками разного цвета в зависимости от их статуса:
```vue
<template>
<div>
<div v-for="item in filteredData" :key="item.id">
<Card :data="item" />
</div>
</div>
</template>
<script>
import Card from './Card.vue';
import { useFilter } from './useFilter';
export default {
components: {
Card,
},
setup() {
const { selectedStatus, filteredData } = useFilter(data);
return { selectedStatus, filteredData };
},
};
</script>
```
В компоненте `CardList` мы используем композицию `useFilter` для фильтрации данных и передаем полученный массив отфильтрованных объектов в компонент `Card`.
Наконец, создаем компонент `Filter`, который будет содержать элемент `select` для выбора статуса и будет обновлять выбранный статус:
```vue
<template>
<select v-model="selectedStatus">
<option value="all">All</option>
<option value="alive">Alive</option>
<option value="dead">Dead</option>
<option value="unknown">Unknown</option>
</select>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedStatus = ref('all');
return { selectedStatus };
},
};
</script>
```
Теперь мы можем использовать компонент `Filter` для выбора статуса, который будет фильтровать и отображать объекты в компоненте `CardList` с соответствующими цветными кружками.