Для реализации фильтрации элементов по категориям в приложении Vue.js вы можете использовать вычисляемые свойства и методы. Вот подробное объяснение, как это сделать.
Шаг 1: Создайте компонент Item
Сначала создайте компонент Item, который будет представлять отдельный элемент. У этого компонента должны быть свойства, такие как "name" и "category", которые будут указывать на имя элемента и его категорию.
<template>
<div>
<h3>{{ name }}</h3>
<p>Category: {{ category }}</p>
</div>
</template>
<script>
export default {
props: {
name: String,
category: String
}
};
</script>
Шаг 2: Создайте главный компонент App
Затем создайте главный компонент App, который будет содержать список элементов и фильтры для категорий.
<template>
<div>
<h2>Item List</h2>
<select v-model="selectedCategory">
<option value="">All Categories</option>
<option v-for="category in categories" :key="category">{{ category }}</option>
</select>
<div>
<Item v-for="item in filteredItems" :key="item.name" :name="item.name" :category="item.category" />
</div>
</div>
</template>
<script>
import Item from './Item.vue';
export default {
components: {
Item
},
data() {
return {
items: [
{ name: 'Item 1', category: 'Category 1' },
{ name: 'Item 2', category: 'Category 2' },
{ name: 'Item 3', category: 'Category 1' },
{ name: 'Item 4', category: 'Category 3' }
],
selectedCategory: ''
};
},
computed: {
categories() {
const categories = new Set();
this.items.forEach(item => {
categories.add(item.category);
});
return Array.from(categories);
},
filteredItems() {
if (this.selectedCategory) {
return this.items.filter(item => item.category === this.selectedCategory);
} else {
return this.items;
}
}
}
};
</script>
Шаг 3: Разместите главный компонент в файле index.html
Наконец, разместите главный компонент в файле index.html, чтобы отобразить его в браузере.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Filter</title>
</head>
<body>
<div id="app">
<App />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./App.vue"></script>
<script>
new Vue({
el: '#app',
render: h => h(App)
});
</script>
</body>
</html>
Теперь, когда вы открываете файл index.html в браузере, вы видите список элементов и выпадающий список с категориями. При выборе категории будет происходить фильтрация элементов в реальном времени.