我有一个表单,该表单当前从外部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));
}
}
这是JSFiddle
处的表格<!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 }}</pre>-->
<!-- Load in dayslots from external JSON file -->
<input name="dayslot" v-for="item in searchedSlots" v-model.lazy="dayslotv" type="text" placeholder="Enter Day and Delivery Slot" required>
<select v-model="search">
<option v-for="item in items" v-bind:value="item.slot">
{{ item.shortcode }} {{ item.slot }}
</option>
</select>
<select v-model="servicev" required>
<option selected disabled hidden>Please Select</option>
<option value="standard">Standard</option>
<option value="installation">Installation</option>
</select>
<!-- Customer adds the max amount they wish to pay -->
<div class="maxfee">
<input name="price" v-model.number="pricev" type="currency" placeholder="Max price you will pay" required>
</div>
<!-- We then display a summary of the options they chose, before they submit -->
<div class="summary"><p>Summary:</p></div>
<p class="summaryresult" style="font-weight:bold;">I would like {{ search.shortcode }} on {{ servicev }} service and pay no more than £{{ pricev }}</p>
<button type="submit">Submit</button>
</form>
<script>
const app = new Vue({
el: '#deliveryservice',
data: {
items: [],
search: '',
dayslotv: '',
servicev: '',
pricev: ''
},
created: function() {
fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
.then(resp => resp.json())
.then(items => {
this.items = items
})
},
});
</script>
</body>
</html>
答案 0 :(得分:1)
我修复了一些错误。过滤将在几分钟后完成。
new Vue({
el: '#deliveryservice',
data: {
items: [],
query: '',
slot: '',
service: 'standard',
price: '0',
src: 'https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json'
},
methods: {
setSlot (evt) {
this.slot = evt.target.value
}
},
async created () {
this.items = await (await fetch(this.src)).json()
this.slot = this.items[0].slot
}
})
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
}
<form name="myform" id="deliveryservice">
<input
v-model="query"
type="text"
placeholder="Enter Day and Delivery Slot"
required
>
<select value="slot" @change="setSlot">
<option
v-for="({shortcode, slot}, idx) in items"
:value="slot"
:selected="idx === 0"
>{{ shortcode }} - {{ slot }}</option>
</select>
<select v-model="service" required>
<option value="standard">Standard</option>
<option value="installation">Installation</option>
</select>
<div class="maxfee">
<input
v-model.number="price"
type="number"
min="0"
placeholder="Max price you will pay"
required
>
</div>
<div class="summary">
<p>Summary:</p>
</div>
<p class="summaryresult" style="font-weight:bold;">
I would like
{{ slot }}
on
{{ service }}
service and pay no more than
£{{ price }}
</p>
<button type="submit">Submit</button>
</form>
<script src="https://unpkg.com/vue"></script>