Для реализации динамического поиска по массиву в Vue.js вы можете использовать компонент v-model совместно с методом фильтрации массива.
Шаг 1: Создайте компонент с полем для ввода поискового запроса
Вам понадобится компонент формы, в котором пользователь сможет ввести свой поисковый запрос. Воспользуйтесь компонентом v-model, чтобы привязать введенное значение к переменной в вашем компоненте:
<template>
<div>
<input type="text" v-model="searchQuery">
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: ''
}
}
}
</script>
Шаг 2: Фильтрация массива
Далее вам необходимо отфильтровать ваш массив данных на основе введенного поискового запроса. Для этого воспользуйтесь методом, который будет возвращать новый массив с отфильтрованными данными:
<script>
export default {
data() {
return {
searchQuery: '',
data: [
// ваш массив данных
]
}
},
computed: {
filteredData() {
return this.data.filter(item => {
return item.includes(this.searchQuery)
})
}
}
}
</script>
В этом примере используется метод filter(), который применяет заданную функцию к каждому элементу массива и возвращает новый массив, содержащий только те элементы, для которых функция вернула true. Мы используем функцию includes(), чтобы проверить, входит ли значение поискового запроса в каждый элемент массива.
Шаг 3: Отображение результатов поиска
Теперь, когда у вас есть отфильтрованный массив данных, вы можете отобразить его на вашей странице. Просто используйте директиву v-for, чтобы пройти по каждому элементу нового массива:
<template>
<div>
<input type="text" v-model="searchQuery">
<ul>
<li v-for="item in filteredData" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
В этом примере мы используем директиву v-for для создания элемента списка <li> для каждого элемента отфильтрованного массива данных filteredData.
Шаг 4: Добавление дополнительных функций
Вы можете расширить этот функционал, добавив дополнительные опции фильтрации, такие как игнорирование регистра, фильтрацию по определенным полям или установку определенного порядка отображения. Это зависит от вашего конкретного use case.
Надеюсь, эта информация будет полезна для вас при создании динамического поиска по массиву в Vue.js!