Для реализации поиска по массиву и добавления класса соответствующим объектам в Vue.js вы можете использовать вычисляемое свойство и директиву v-bind:class.
Первым шагом я рекомендую создать компонент, который будет отображать список объектов с возможностью поиска. В данном компоненте устанавливаем массив объектов в data и добавляем 2 свойства: searchString и filteredItems.
<template>
<div>
<input type="text" v-model="searchString" placeholder="Поиск" />
<ul>
<li v-for="item in filteredItems" v-bind:class="{ 'highlight': item.highlighted }">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchString: '',
items: [
{ name: 'Объект 1', highlighted: false },
{ name: 'Объект 2', highlighted: false },
{ name: 'Объект 3', highlighted: false },
// ...
]
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.name.toLowerCase().includes(this.searchString.toLowerCase());
});
}
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
В этом коде мы добавили поле ввода для поиска (searchString) и определили список объектов (items). Далее, мы использовали v-for для отображения каждого объекта списка и директиву v-bind:class для добавления класса "highlight" соответствующим элементам, у которых свойство highlighted равно true.
В computed свойстве filteredItems мы фильтруем массив объектов, сравнивая каждое имя объекта с searchString. Если имя включает строку поиска (без учета регистра), то объект попадает в отфильтрованный массив.
В итоге, при каждом изменении строки поиска, свойство filteredItems будет пересчитываться и список объектов будет обновляться, а класс "highlight" будет добавляться к соответствующим элементам списка.
Вы можете настроить стили для класса "highlight" в секции style, чтобы подсветить найденные объекты.