У меня есть форма, которая в настоящее время извлекает набор данных из внешнего JSON в виде списка параметров, я пытаюсь включить поисковый фильтр для отображения параметров по мере ввода. Вот вычисленный код, который я создал:
computed: {
searchedSlots: function() {
return this.items.filter(function(item) {
return (
(item.shortcode.toLowerCase().match(this.searchTerms.toLowerCase())) ||
(item.slots.toLowerCase().match(this.searchTerms.toLowerCase()))
)
}.bind(this));
}
}
Кроме того, данные поиска v-модели не отображаются в Сводке
Вот форма на JSFiddle
Вот пример того, как форма может выглядеть после того, как она была заполнена
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
/>
<style>
input, select, button {
float:left;
display:block;
clear:both;
min-width:200px;
margin-bottom: 1rem;
}
.maxfee, .summary, p.summaryresult {
float:left;
display:block;
clear:both
}
</style>
<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<form name="myform" id="deliveryservice">
<!--<pre>{{ items.shortcode }} ->
<! - Загрузить в дневных интервалах из внешнего файла JSON ->
<! - Клиент добавляет максимальную сумму, которую он хочет заплатить ->
<! - Затем мы показываем сводку опций, которые они выбрали, прежде чем отправить ->
Я хотел бы {{search.shortcode}} использовать {{servicev}} услугу и платить не более £ {{pricev}}
const app = new Vue ({
el: '#deliveryservice',
данные: {
Предметы: [],
поиск: '',
dayslotv: '',
servicev: '',
цена: ''
},
созданный: функция () {
выборки ( '
https://s3.eu -west-2.amazonaws.com / dayslots10 / dayslots.json')
.then (resp => resp.json ())
.then (items => {
this.items = items
})
},
});