Получилось реализовать поиск, но сомневаюсь в грамотности подхода к решению задачи. Так же необходимо чтобы данные выводились в формате input type="radio", при этом выбранное значение должно становиться значением input
Получилось пока что вывести искомые данные только как список, и повесить на них обработчик, но не происходит изменение v-model у инпут
Использую Vue2
<div class="shipment-kind__content">
<input type="text" id="search" class="textarea" v-model="search" />
<br />
</div>
<ul id="results" >
</ul>
data() {
return {
dop_info: false,
wagon: "",
wagon_type: [],
belong: "",
search: "",
search_value: "",
flame: "",
};
},
computed: {
...mapState({
user: (state) => state.auth.user,
uid: (state) => state.auth.uid,
}),
},
watch: {
search() {
let data = []
for (let i in this.wagon_type) {
data.push(this.wagon_type[i].name
)
}
const result = document.getElementById('results')
renderList(data, result)
function filter(val, data) {
return data.filter(i => i.includes(val))
};
function renderList(_data = [], el = this.search) {
el.innerHTML = '';
_data.forEach(i => {
let new_el = document.createElement('li')
new_el.setAttribute('id', `${i.slice(0, 1) + ((Math.random() * 100).toString()).slice(0, 8)}`)
new_el.innerHTML = i
el.appendChild(new_el)
new_el.addEventListener('click', function() {
this.search = new_el.textContent
})
})
}
renderList(filter(this.search, data), result)
Данные в таком формате :
['Сортиментовоз', 'Прочие', 'Крытый', 'Вагон-термос', 'Дизельно-служебный вагон', 'Дизель-электростанция', 'Думпкар', 'Зерновозы', 'ИВ-термос (переоборудованный из вагона рефсекции)', 'ИВ-термос (переоборудованный из крытого вагона)', 'Минераловозы', 'Окатышевоз', 'ПЛ для КТК длиной 19,62', 'Полувагон люковый', 'Полувагоны - Щеповозы', 'Рефрижератор', 'Тепловоз', 'Цементовоз', 'Хопер-Цементовоз', 'Хопер-дозатор', 'Фитинг', 'Рефрижератор (40)', 'Рефрижератор (20)', 'Цистерна', 'Платформа', 'Полувагон', 'Рефсекция']
